“構(gòu)建工具是將本地源文件按照一定的邏輯規(guī)范角雷，編譯打包成瀏覽器識別的文件阅爽，然后推送到相應(yīng)服務(wù)器環(huán)境下供展示的一種前端工具顷蟆，工具的目的就是幫助開發(fā)者降低開發(fā)成本，使開發(fā)者更加專注業(yè)務(wù)邏輯開發(fā)本身衰絮】梗”
何為構(gòu)建咆畏？
把源代碼生成可執(zhí)行應(yīng)用程序的過程自動(dòng)化的程序，構(gòu)建包括編譯坚嗜、連接跟把代碼打包成可用的或可執(zhí)行的形式。
前端的構(gòu)建一般包括：
- JS轉(zhuǎn)碼（使用Babel轉(zhuǎn)ES6或TypeScript自轉(zhuǎn)等）
- CSS轉(zhuǎn)碼（Less或Sass轉(zhuǎn)Css）
- 代碼或資源的合并與壓縮
- 基礎(chǔ)檢查和各類測試
- ……
舉例說明： - 用 CoffeeScript/ES6 代替Javascript诗充，但是瀏覽器對這些語言是不支持或者支持得不完整的苍蔬，需要將其編譯成Javascript(ES5)
- 用Less去寫CSS
- 用Jade去寫HTML
- 用Browserify去模塊化
- 為非覆蓋部署的資源加MD5戳等
三類構(gòu)建工具
- 模塊化打包類：Webpack
- 任務(wù)流構(gòu)建類 ：Gulp
- 集合型工具類（腳手架）：React CLI | Vue CLI | Angular CLI
本文主要介紹構(gòu)建工具
- Npm Scripts
- Gulp
- Webpack
1.Npm Scripts（NPM腳本）
NPM是安裝Node時(shí)附帶的一個(gè)包管理器，腳本功能是 npm 內(nèi)置的最強(qiáng)大蝴蜓、最常用的功能之一碟绑。Npm Scripts（NPM腳本）是一個(gè)任務(wù)執(zhí)行者。
什么是NPM腳本茎匠？
定義在package.json里面的腳本格仲，就稱為 npm 腳本。
舉例說明：
在 package.json 文件里面使用 scripts 字段定義任務(wù)
{
"scripts":{
"dev": "node dev.js",
"pub": "node build.js"
}
}
上面代碼是package.json文件的一個(gè)片段诵冒，里面的scripts字段是一個(gè)對象凯肋。它的每一個(gè)屬性，對應(yīng)一段Shell腳本汽馋。
以上代碼定義了兩個(gè)任務(wù)侮东，dev 和 pub。
命令行下使用npm run命令豹芯，就可以執(zhí)行這段腳本悄雅。
$ npm run pub
# 等同于執(zhí)行
$ node build.js
優(yōu)點(diǎn)：
npm scripts 的優(yōu)點(diǎn)是內(nèi)置，無需安裝其他依賴
缺點(diǎn)：
功能太簡單铁蹈，雖然提供了 pre 和 post 兩個(gè)鉤子宽闲，但不能方便的管理多個(gè)任務(wù)之間的依賴。
npm使用指南：
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
2. Gulp
Gulp是一個(gè)基于流的自動(dòng)化構(gòu)建工具木缝。除了可以管理任務(wù)和執(zhí)行任務(wù)，還支持監(jiān)聽文件围辙、讀寫文件我碟。Gulp 被設(shè)計(jì)的非常簡單，只通過下面5個(gè)方法就可以支持幾乎所有構(gòu)建場景：
- 通過
gulp.task注冊一個(gè)任務(wù)姚建； - 通過
gulp.run執(zhí)行任務(wù)矫俺； - 通過
gulp.watch監(jiān)聽文件變化； - 通過
gulp.src讀取文件掸冤； - 通過
gulp.dest寫完文件厘托。
特點(diǎn)
引入了流的概念，同時(shí)提供了一系列常用插件去處理流稿湿，流可以在插件之間傳遞
優(yōu)點(diǎn)：
好用又不失靈活铅匹，既可以單獨(dú)完成構(gòu)建，也可以和其他工具搭配使用饺藤。
缺點(diǎn)：
集成度不高包斑，要寫很多配置后才可以用流礁，無法做到開箱即用。
3. WebPack
Webpack 是一個(gè)打包模塊化的JavaScript的工具罗丰，在Webpack里一切文件皆模塊神帅，通過 loader 轉(zhuǎn)換文件，通過Plugin 注入鉤子萌抵，最后輸出由多個(gè)模塊組合成的文件找御。Webpack 專注于構(gòu)建模塊化項(xiàng)目。
一切文件绍填，如JavaScript霎桅、CSS、SCSS沐兰、圖片哆档、模板，對于Webpack 來說都是一個(gè)個(gè)模塊
四大核心要素：
entry： 配置入口文件住闯，即產(chǎn)生依賴關(guān)系圖的入口
output：文件的產(chǎn)出位置配置
loader：匹配文件的編譯過程
plugins：針對整個(gè)構(gòu)建打包流程的插件處理（文件壓縮瓜浸，dev環(huán)境的熱加載）
舉例說明：
module.exports = {
// 所有模塊的入口，webpack從入口開始遞歸解析出所有依賴的模塊
entry: './app.js',
output: {
// 將入口所依賴的所有模塊打包成一個(gè)文件 bundle.js 輸出
filename: 'bundle.js'
}
}
優(yōu)點(diǎn)：
- 專注于處理模塊化的項(xiàng)目比原，能做到開箱即用插佛、一步到位；
- 可通過 Plugin 擴(kuò)展量窘，完整好用又不失靈活性雇寇；
- 使用場景不局限于Web開發(fā)；
- 社區(qū)龐大活躍蚌铜，經(jīng)常引入緊跟時(shí)代發(fā)展的新特性锨侯，能為大多數(shù)場景找到已有的開源擴(kuò)展；
- 良好的開發(fā)體驗(yàn)冬殃；
缺點(diǎn)：
只能用于采用模塊化開發(fā)的項(xiàng)目囚痴。
