前端構建工具對比

上文介紹過前端模塊化的發展，可是它們都有一個共同點：源代碼沒法直接運行，必須經過轉換後才能夠正常運行。 構建就是作這件事，將源代碼轉換成可執行的JavaScript、CSS、HTML代碼，包括以下內容：

• 代碼轉換
• 文件優化
• 代碼分割
• 模塊合併
• 自動刷新
• 代碼校驗
• 自動發佈

構建實際上是工程化、自動化思想在前端開發中的體現，將一系列流程用代碼去實現。下面介紹一些經常使用構建工具：

Npm Script

Npm Script是Npm內置的一個功能，容許在package.json文件裏使用script字段定義任務。Npm Script的優勢是內置，無須要安裝其餘依賴。其缺點是功能太簡單，不能方便地管理多個任務之間的依賴。

Grunt

Grunt也是一個任務執行者。Grunt有大量現成的插件，也能管理任務之間的依賴關係，自動化地執行依賴任務，每一個任務的具體執行代碼和依賴的關係寫在配置文件Gruntfile.js裏。Grunt的缺點是集成度不高，要寫不少配置文件後纔可使用，沒法作到開箱即用。

Gulp

Gulp是一個基於流的自動化構建工具。除了能夠管理和執行任務，還支持監聽文件、讀寫文件。Gulp被設計的很是簡單，只經過下面5種方法就能夠支持幾乎全部的構建場景：

• 經過gulp.task註冊一個任務
• 經過gulp.run執行任務
• 經過gulp.watch監聽文件變化
• 經過gulp.src讀取文件
• 經過gulp.dest寫文件

Gulp的最大特色是引入了流的概念，同時提供了一系列經常使用的插件去處理流，流能夠再插件之間傳遞。

Fis3

Fis3是一個來自百度的優秀構建工具，相對於Grunt、Gulp這些只提供了基本功能的工具，Fis3集成了Web開發中的經常使用構建功能。它的缺點是目前官方已經再也不維護和更新了。

webpack

Webpack是一個模塊化打包工具，在Webpack裏面一切文件皆爲模塊，經過Loader轉換文件，經過Plugin注入鉤子，最後輸出由多個模塊組合成的文件。Webpack專一於構建模塊化項目。
Webpack的有優勢是：

• 專一於處理模塊化的項目，能作到開箱即用
• 經過Plugin拓展，完整好用又不失靈活
• 使用場景不侷限於 Web 開發
• 社區龐大活躍

Rollup

Rollup是一個和Webpack相似但專一於ES6的模塊打包工具。它的亮點在於，能針對ES6源碼進行Tree Shaking，以除去那些已經被定義但沒被使用的代碼並進行Scope Hoisting,以減小輸出文件的大小和性能提高。然而Rollup這些亮點隨後就被Webpack模仿和實現了