前端工程化中的重要環(huán)節(jié)——自動(dòng)化構(gòu)建
自動(dòng)化構(gòu)建的概念
自動(dòng)化構(gòu)建是前端工程化中非常重要的一個(gè)環(huán)節(jié)。在開始之前我們先從字面意義上來(lái)解讀一下,自動(dòng)化其實(shí)就是將手動(dòng)的部分交給機(jī)器完成,構(gòu)建可以理解為轉(zhuǎn)換的意思,其實(shí)就是將我們寫的代碼轉(zhuǎn)換成能夠上線運(yùn)行的代碼。
那自動(dòng)化構(gòu)建,就是將我們寫的原代碼自動(dòng)的轉(zhuǎn)換成能夠上線運(yùn)行的代碼。

這個(gè)轉(zhuǎn)換的過(guò)程也被稱為自動(dòng)化構(gòu)建工作流。
比如使用最新的 EcmaScript 語(yǔ)法提高編碼效率,使用 Sass 或者 less 增強(qiáng) CSS 的可編程性,使用模板引擎抽象頁(yè)面中重復(fù)的 HTML 等等,這些在瀏覽器中是無(wú)法被直接支持運(yùn)行的。自動(dòng)化構(gòu)建工具,就是將這些不被支持的代碼轉(zhuǎn)換成可以直接運(yùn)行的代碼。
總的來(lái)說(shuō),自動(dòng)化構(gòu)建,可以讓我們脫離運(yùn)行環(huán)境帶來(lái)的各種兼容性等問(wèn)題,從而能夠使用提高效率的語(yǔ)法、規(guī)范和標(biāo)準(zhǔn)。
npm scripts 自動(dòng)化構(gòu)建
什么是 npm scripts ?npm 允許在 package.json 文件中,使用 scripts 字段定義腳本命令,字段名就是命令執(zhí)行的關(guān)鍵字,字段值是具體要執(zhí)行的命令。

配置完成后,命令行執(zhí)行 npm run foo 就能夠看到 foo.js 的執(zhí)行結(jié)果。
同時(shí),npm scripts 是可以一次執(zhí)行多條命令任務(wù)的,但是需要注意的是,命令任務(wù)的執(zhí)行有串行執(zhí)行和并行執(zhí)行的區(qū)別,串行和并行分別是什么含義呢?
串行執(zhí)行(series):任務(wù)之間使用 && ( 兩個(gè) & 符號(hào) ) 連接,任務(wù)之間有先后順序,前一個(gè)任務(wù)執(zhí)行結(jié)束,才能后執(zhí)行下一個(gè)任務(wù),就類似接力賽跑。
并行執(zhí)行(parallel):任務(wù)之間使用 & ( 一個(gè) & 符號(hào) ) 連接,任務(wù)之間沒有先后順序,同時(shí)執(zhí)行可以提高執(zhí)行效率,就類似多人進(jìn)行百米賽跑。

將 less 代碼轉(zhuǎn)為CSS并壓縮,先確保 less 和 minify 已經(jīng)安裝成功:npm i less minify -g,less 和 minify 的具體用法,查看對(duì)應(yīng)文檔即可:
之前我們需要先執(zhí)行 less 轉(zhuǎn)換命令,然后再執(zhí)行代碼壓縮的 minify 命令,而配置好 scripts 之后,只需要執(zhí)行 npm run styles 一條命令,就可以執(zhí)行這兩個(gè)不同的任務(wù)了。這也就是自動(dòng)化構(gòu)建的核心思想。
另外需要注意的是 windows 系統(tǒng)環(huán)境下, & 并行執(zhí)行是不被支持的,我們可以借助 npm-run-all 插件來(lái)實(shí)現(xiàn)不同任務(wù)的執(zhí)行。

自動(dòng)化構(gòu)建工具
我們使用最多的其實(shí)就是 npm scripts 了,在 packag.json 文件中配置,可以一次執(zhí)行多個(gè)命令。

Grunt
https://www.gruntjs.net/:JavaScript 世界的構(gòu)建工具。
Grunt 生態(tài)系統(tǒng)非常龐大,并且一直在增長(zhǎng)。由于擁有數(shù)量龐大的插件可供選擇,因此,你可以利用 Grunt 自動(dòng)完成任何事,并且花費(fèi)最少的代價(jià)。
Gulp
https://www.gulpjs.com.cn/ : 用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程!
用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程!
FIS
http://fis.baidu.com/ : FIS3 , 為你定制的前端工程構(gòu)建工具。
解決前端開發(fā)中自動(dòng)化工具、性能優(yōu)化、模塊化框架、開發(fā)規(guī)范、代碼部署、開發(fā)流程等問(wèn)題。
Gulp 的基本使用
全局安裝 gulp 客戶端 npm install- g gulp-ci ;
初始化項(xiàng)目 npm init -y
安裝 gulp 依賴包 npm install gulp -D
新建 gulpfile 文件 ( gulpfile.js) ;
在 gulpfile js 中,創(chuàng)建 gulp 任務(wù);
執(zhí)行 gulp 任務(wù) gulp <task-name>
gulpfile.js:
執(zhí)行命令 gulp foo

我們能夠看到一個(gè)報(bào)錯(cuò)信息,提示任務(wù)沒有完成,你是不是忘記發(fā)送異步完成的信號(hào)了。
這個(gè)錯(cuò)誤是在新版的 gulp 中才會(huì)出現(xiàn)的,原因就是 gulp 約定所有任務(wù)都是異步的,所以在代碼中,我們可以使用一個(gè)異步回調(diào)函數(shù)的方式,完成異步信號(hào)的發(fā)出。
如果導(dǎo)出的成員名稱為 default ,及默認(rèn)執(zhí)行的成員方法,命令行中不需要指定成員名即可執(zhí)行。
推薦閱讀:
如何使用 Webpack 實(shí)現(xiàn)模塊化打包?
恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。
點(diǎn)個(gè)“在看”和“贊”吧!
