前端工程化中的重要環(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è)“在看”和“贊”吧！