摘要：常見前端構(gòu)建工具的分類和對(duì)比是附帶的包管理器，是內(nèi)置的一個(gè)功能，允許在文件里面使用字段定義任務(wù)在這里，一個(gè)屬性對(duì)應(yīng)一段腳本，原理是通過調(diào)用去運(yùn)行腳本命令。

端技術(shù)范圍不斷發(fā)展，前端開發(fā)不僅限于直接編寫html，css和javascript，Web應(yīng)用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語(yǔ)言（Es6 TypeScript）隨之出現(xiàn)，而構(gòu)建工具則承擔(dān)起了中間的橋梁作用。

構(gòu)建工具最直接的作用是：將源碼轉(zhuǎn)換成可執(zhí)行的js,css和html，具體包括:

代碼轉(zhuǎn)換:ts->js,scss->css

文件優(yōu)化:壓縮js,css,html，壓縮合并圖片等

代碼分割：提取公共代碼。

模塊合并：將模塊化里的多個(gè)模塊和文件合并到一個(gè)文件

自動(dòng)刷新：監(jiān)聽本地代碼，自動(dòng)重新構(gòu)建，刷新瀏覽器。（熱重載）

代碼校驗(yàn)：代碼被提交到倉(cāng)庫(kù)前需要校驗(yàn)規(guī)范

自動(dòng)發(fā)布：更新代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼，傳輸給發(fā)布系統(tǒng)

構(gòu)建其實(shí)是工程化和自動(dòng)化思想的再前端的體現(xiàn)：將一系列流程用代碼自動(dòng)去實(shí)現(xiàn)，解放生產(chǎn)力。

npm是nodejs附帶的包管理器，npm script是npm內(nèi)置的一個(gè)功能，允許在package.json文件里面使用script字段定義任務(wù)：

{
    "scripts":{
        "dev":"node dev.js",
        "pub":"node build.js"
    }
}

在這里，一個(gè)屬性對(duì)應(yīng)一段shell腳本，原理是通過調(diào)用shell去運(yùn)行腳本命令。

內(nèi)置，無(wú)需安裝其他依賴

功能簡(jiǎn)單，不方便管理多個(gè)任務(wù)依賴

Grunt與npm script類似，也是通過shell運(yùn)行腳本命令。

Grunt與大量封裝好的插件，可以用于常見任務(wù)，也能管理任務(wù)之間的依賴。

grunt的具體執(zhí)行代碼和依賴關(guān)系寫在配置文件的里,例如：

module.exports = function(grunt){
    //插件的配置信息
    grunt.initConfig({
        uglify:{
            app_task:{
                files:{
                    "build/app.min.js":["lib/index.js","lib/test.js"]
                }
            }
        }
    })
    ...
}

靈活，只執(zhí)行我們定義的任務(wù)

有大量現(xiàn)成的插件

集成度不高，需要些大量配置

相當(dāng)于進(jìn)階版npm script

基于流的自動(dòng)化構(gòu)建工具。除了可以管理和執(zhí)行任務(wù)，還支持監(jiān)聽讀寫文件。簡(jiǎn)單例子：

var gulp = require("gulp");     //引用基礎(chǔ)模塊
var uglify = require("gulp-uglify");    //js壓縮模塊

gulp.task("script",function(){  //啟動(dòng)任務(wù)script
  gulp.src("js/*.js")           //找到文件
  .pipe(uglify())               //壓縮文件
  .pipe(gulp.dest("dist/js"))   //另存壓縮文件
});
//監(jiān)聽
gulp.task("auto",function () {
  gulp.watch("js/*.js",["script"]);     //監(jiān)聽script任務(wù)
  gulp.watch("css/*.css",["css"]);      //監(jiān)聽css任務(wù)
  gulp.watch("images/*.*",["images"]);  //監(jiān)聽images任務(wù)
})；

靈活，可多帶帶使用也可搭配其他工具

集成度不高

加強(qiáng)版Grunt，增加文件監(jiān)聽，文件讀寫，流式處理任務(wù)

相當(dāng)于進(jìn)階版npm script

fis3相對(duì)于前面的工具，集成了Web開發(fā)中常用的構(gòu)建功能：

資源定位：分離開發(fā)路徑與部署路徑之間的關(guān)系，工程師只需要使用相對(duì)路徑來定位自己的開發(fā)資源，代碼容易移植

文件指紋：輸出文件時(shí)，為文件url+md5戳，優(yōu)化緩存

文件編譯：通過parser配置文件解析器做文件轉(zhuǎn)換

壓縮資源：在文件中通過match配置壓縮器，實(shí)現(xiàn)前端工程優(yōu)化

圖片合并：CssSprite(雪碧圖)配置，合并多個(gè)css導(dǎo)入的圖片到一個(gè)圖片，減少http請(qǐng)求

靈活，只執(zhí)行我們定義的任務(wù)

有大量現(xiàn)成的插件

集成了Web開發(fā)中常用的構(gòu)建功能，配置簡(jiǎn)單，開箱即用

官方不再維護(hù)和更新，不支持最新版本的node.js

是一個(gè)專注于web開發(fā)的完整解決方案

webpack是一個(gè)打包模塊化js的工具，在webpack里，一切文件都是模塊，通過Loader轉(zhuǎn)換文件，通過plugin注入鉤子，最后輸出由多個(gè)模塊組成的文件。webpack專注于構(gòu)建模塊化項(xiàng)目。

專注于模塊化，開箱即用一步到位

通過plugin拓展，完整好用又不失靈活

使用場(chǎng)景不局限于web開發(fā)

社區(qū)龐大活躍

良好的開發(fā)體驗(yàn)

只能用于模塊化開發(fā)

Rollup是一個(gè)類似于Webpack模塊打包工具，但專注于ES6的模塊化。

能對(duì)es6的源碼進(jìn)行Tree Shaking(簡(jiǎn)單介紹剔除無(wú)效代碼，稍微詳細(xì)點(diǎn)就是可以去除已經(jīng)被定義卻沒被使用的代碼并進(jìn)行Scope Hoisting(作用域提升)，以減小輸出文件的大小和提升運(yùn)行性能。)

打包時(shí)不支持code Spliting（對(duì)打包生成的bundle.js文件進(jìn)行分割成chunk塊），所以沒有模塊加載、執(zhí)行和緩存的代碼。好處是打包js庫(kù)時(shí)，文件更小，但是功能不夠完善

插件庫(kù)比較少，社區(qū)不夠活躍

parcel是一款剛誕生不久的新型打包器，并且短短幾周內(nèi)就獲得大量贊同。

快速打包：parcel使用工作進(jìn)程啟用多核編譯，并且有文件系統(tǒng)緩存，重新啟動(dòng)后也可以快速構(gòu)建

打包所有資源：支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件。

自動(dòng)轉(zhuǎn)換：在需要時(shí)，代碼使用 Babel，PostCSS 和 PostHTML 自動(dòng)轉(zhuǎn)換

零配置代碼拆分：使用動(dòng)態(tài) import() 語(yǔ)法拆分您的輸出包，所以只加載初始加載時(shí)所需的內(nèi)容。

模塊熱替換：在開發(fā)過程中進(jìn)行更改時(shí)，Parcel 會(huì)自動(dòng)更新瀏覽器中的模塊，不需要進(jìn)行任何配置。

友好的錯(cuò)誤記錄

不支持 SourceMap ：在開發(fā)模式下，Parcel 也不會(huì)輸出 SourceMap，目前只能去調(diào)試可讀性極低的代碼；

不支持剔除無(wú)效代碼 ( TreeShaking )：很多時(shí)候我們只用到了庫(kù)中的一個(gè)函數(shù)，結(jié)果 Parcel 把整個(gè)庫(kù)都打包了進(jìn)來；

零配置的實(shí)現(xiàn)實(shí)質(zhì)是默認(rèn)值，Parcel 只要在目錄中發(fā)現(xiàn)這些配置文件就會(huì)認(rèn)為該項(xiàng)目中的代碼需要被處理，導(dǎo)致某些已經(jīng)被處理的庫(kù)可能會(huì)被多次處理

某些配置被關(guān)閉，在特定場(chǎng)景不適用

只專注于構(gòu)建用于運(yùn)行在瀏覽器中的網(wǎng)頁(yè)，不像webpack一樣可以打包發(fā)布npm的庫(kù)，構(gòu)建nodejs同構(gòu)應(yīng)用等

npm script 和grunt， web開發(fā)要做的事情變多，流程復(fù)雜，引入自動(dòng)化思想

Gulp時(shí)代，出現(xiàn)一些新語(yǔ)言提高開發(fā)效率，流式處理思想的出現(xiàn)，簡(jiǎn)化了文件轉(zhuǎn)換的流程

webpack時(shí)代，單頁(yè)應(yīng)用流行，網(wǎng)頁(yè)功能更加復(fù)雜和龐大，web開發(fā)向模塊化改進(jìn)，

當(dāng)項(xiàng)目比較龐大時(shí)，需要引入不同的庫(kù)，帶來了以下問題：

不同庫(kù)命名空間沖突（例如jq和zepto都使用了window.$）
庫(kù)之間有依賴，需要控制加載順序
需要管理庫(kù)的版本
這種情況下，模塊化的思想出現(xiàn)了：將復(fù)雜系統(tǒng)分割成多個(gè)模塊以方便開發(fā)。 主要的模塊劃規(guī)范：

一種js模塊化規(guī)范，commonJS的核心是通過requrire方法，同步加載所依賴的其他模塊，通過module.exports導(dǎo)出需要的接口，具體使用方式在此不深入

優(yōu)點(diǎn)

代碼在nodeJS的環(huán)境下能運(yùn)行

Npm發(fā)布的第三方模塊很多都采用了commonJS規(guī)范：

缺點(diǎn)

無(wú)法直接運(yùn)行在瀏覽器環(huán)境，必須借助工具轉(zhuǎn)換

另一種js模塊化規(guī)范，與 commonJS的關(guān)鍵區(qū)別是異步加載所依賴的模塊。AMD主要針對(duì)瀏覽器環(huán)境的模塊化，代表實(shí)現(xiàn)是requirejs

優(yōu)點(diǎn)

可直接運(yùn)行于瀏覽器

可以異步加載

可以并行加載多個(gè)依賴

代碼可運(yùn)行在瀏覽器和nodejs環(huán)境

缺點(diǎn)

需要先引入實(shí)現(xiàn)了AMD的庫(kù)才能使用

ES6在語(yǔ)言層面實(shí)現(xiàn)模塊化，通過使用import和export導(dǎo)入和導(dǎo)出模塊。ES6的模塊化將要逐漸取代Commonjs和AND規(guī)范，是模塊化的終極解決方案。

優(yōu)點(diǎn)

是模塊化的終極解決方案

缺點(diǎn)

目前無(wú)法直接運(yùn)行在大部分的js運(yùn)行環(huán)境，需要借助構(gòu)建工具等轉(zhuǎn)換成es5

前端工程化的意義,是為了提高編碼->測(cè)試->維護(hù) 的運(yùn)行效率，主要從開和部署兩方面來入手：開發(fā)方面需要做好代碼規(guī)范和開發(fā)模塊化；部署階段的主要流程包括：

代碼檢查

代碼合并和壓縮

代碼編譯

單元測(cè)試

工程化就是借助構(gòu)建工具實(shí)現(xiàn)流程自動(dòng)化，而前端自動(dòng)化可以理解為在工程化上做更進(jìn)一步的自動(dòng)化。

從前文對(duì)構(gòu)建工具的介紹可以看出，這里的性能優(yōu)化主要以下方面：

代碼文件壓縮，壓縮Html、Css、Javascript等文件，減小體積

圖片壓縮和合并，例如廣為人知的Sprite（雪碧圖）技術(shù)

熱重載也就是自動(dòng)刷新，主要是監(jiān)聽本地源代碼變化，自動(dòng)重新構(gòu)建和刷新瀏覽器，隨著新的技術(shù)框架的出現(xiàn)，例如Vue,React等，這門技術(shù)也基本成為了開發(fā)標(biāo)配。

如果內(nèi)容有錯(cuò)誤的地方歡迎指出（覺得看著不理解不舒服想吐槽也完全沒問題）；如果對(duì)你有幫助，歡迎點(diǎn)贊和收藏，轉(zhuǎn)載請(qǐng)征得同意后著明出處，如果有問題也歡迎私信交流，主頁(yè)有郵箱地址

參考資料，吳浩麟《深入淺出 Webpack》