隨著前端技術的不斷發展和變革，業務邏輯也變得越來越復雜多樣，企業對前端的應用功能要求也不斷提高，例如優化開發流程，提高編碼效率和質量，提高項目的可維護性...從一個項目搭建再到部署上線，這里面的每一個過程我們都可以通過前端工程化，提高工作效率。

簡單來說，前端工程化可以提升開發體驗、提高開發效率和質量、提升應用的訪問性能，一切以提高效率、降低成本、質量保證為目的的手段都屬于工程化。前端工程化它主要包含從編碼、發布到運維的整個前端研發生命周期，把軟件工程相關的方法和思想應用到前端開發。

但當提到工程化工具，作為經驗豐富的前端開發者，可以列舉出很多代表。首先是Grunt&Gulp，這兩款工具都是基于任務類型，所以它們的工作流是一致的：可以看到它們打包的策略通常是Allinone，后頁面還是引用css、img、js，開發流程與徒手開發相比并無差異。Grunt是老牌的構建工具，特點是配置驅動，你需要做的就是了解各種插件的功能，然后把配置整合到Gruntfile.js中。Grunt缺點也是配置驅動，當任務非常多的情況下，試圖用配置完成所有事簡直就是個災難;再就是它的I/O操作也是個弊病，它的每一次任務都需要從磁盤中讀取文件，處理完后再寫入到磁盤。例如：我想對多個less進行預編譯、壓縮操作，那么Grunt的操作就是：讀取less文件->編譯成css->存儲到磁盤->讀取css->壓縮處理->存儲到磁盤這樣一來當資源文件較多，任務較復雜的時候性能就是個問題了。

Gulp特點是代碼驅動，寫任務就和寫普通的Node.js代碼一樣，在一個對文件讀取是流式操作(Stream)，也就是說一次I/O可以處理多個任務，還是less的例子。Gulp的流程就是：讀取less文件->編譯成css->壓縮處理->存儲到磁盤。Gulp作為任務類型的工具沒有明顯的缺點的問題，可能就是完成相同的任務它需要寫的代碼更多一些，所以除非是項目有歷史包袱，在Grunt與Gulp對比看來還是比較推薦Gulp!

Webpack是目前熱門的前端資源模塊化管理和打包工具。Webpack的特點：1.把一切都視為模塊：不管是CSS、JS、Image還是HTML都可以互相引用，通過定義entry.js，對所有依賴的文件進行跟蹤，將各個模塊通過loader和plugins處理，然后打包在一起。2.按需加載：打包過程中Webpack通過CodeSplitting功能將文件分為多個chunks，還可以將重復的部分單獨提取出來作為commonChunk，從而實現按需加載。Webpack也是通過配置來實現管理，與Grunt不同的時，它包含的許多自動化的黑盒操作所以配置起來會簡單很多。那Webpack的不足之處就在于：1.上手比較難：官方文檔混亂、配置復雜、難以調試(Webpack2已經好了很多)對于新手而言需要經歷踩坑的過程;2.對于Server端渲染的多頁應用有點力不從心：Webpack的初設計就是針對SPA，所以在處理Server端渲染的多頁應用時，不管你如何chunk，總不能真正達到按需加載的地步，往往要去考慮如何提取公共文件才能達到優狀態。

比如，你的工程模塊依賴很簡單，不需要把js或各種資源打包，只需要簡單的合并、壓縮，在頁面中引用就好了。那就不需要Browserify、Webpack。Gulp就夠用了。

反過來，如果你的工程龐大，頁面中使用了很多庫(SPA很容易出現這種情況)，那就可以選擇某種模塊化方案。至于是用Browserify還是Webpack就需要根據其他因素來判斷了。

摘自：達內教育公眾號