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

端技術(shù)范圍不斷發(fā)展，前端開發(fā)不僅限于直接編寫html，css和javascript，Web應(yīng)用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（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，壓縮合并圖片等

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

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

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

代碼校驗：代碼被提交到倉庫前需要校驗規(guī)范

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

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

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

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

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

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

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

Grunt與npm script類似，也是通過shell運行腳本命令。

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)于進階版npm script

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

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

gulp.task("script",function(){  //啟動任務(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ù)
})；

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

集成度不高

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

社區(qū)龐大活躍

良好的開發(fā)體驗

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

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

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

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

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

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

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

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

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

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

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

友好的錯誤記錄

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

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

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

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

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

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

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

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

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

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

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

優(yōu)點

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

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

缺點

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

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

優(yōu)點

可直接運行于瀏覽器

可以異步加載

可以并行加載多個依賴

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

缺點

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

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

優(yōu)點

是模塊化的終極解決方案

缺點

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

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

代碼檢查

代碼合并和壓縮

代碼編譯

單元測試

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

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

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

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

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

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

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