前端構建工具的區別與聯繫

前端自動化構建工具，我我的將其分爲兩類：構建工具、模塊化工具。但因爲模塊化工具的功能愈來愈豐富，二者之間的界限也愈來愈模糊。
構建工具主要有：Gulp和Grunt
模塊化工具主要有：Webpack、Browserify，以及瀏覽器端的模塊化實現SeaJs、RequireJs

• 構建工具

  • Gulp：Gulp的處理過程，能夠簡化爲，以流的形式讀入文件 -> 文件流在各個處理函數之間流轉處理 -> 輸出文件。Gulp能夠定義一系列任務，如壓縮代碼、預編譯代碼、壓縮圖片、生成圖片雪碧圖、CSS自動補全等，只要事先編寫好這些任務，每次發佈前只須要在命令行敲一行代碼就能完成構建。固然，也能夠在Gulp使用Webpack和Browserify。

  • Grunt：Grunt與Gulp的功能相似，二者最大的區別就是，Grunt處理過程當中會產生多箇中間態文件，有屢次I/O操做，效率比較低；而Gulp只須要一次I/O操做，中間過程都是文件流在各任務之間流轉，效率較高。其餘方面，相較於Grunt，Gulp的API設計更加簡潔、易學，而且聽從unix的設計哲學，處理過程更加清晰。

• 模塊化工具

  • 本地模塊化

    1. Webpack：WebPack只是一種模塊化的解決方案，但因爲其加載器（loaders）的存在，使WebPack能夠在打包文件以前，對原始文件作預處理。WebPack的處理過程能夠簡化爲，給定一個入口文件，從該文件開始找到項目的全部依賴，並用loaders處理這些文件，最後打包成瀏覽器可執行的JavaScript文件。Gulp和WebPack有不少重疊功能，但處理問題的思路差異很大；Gulp更關注過程，明確地先作什麼，再作什麼，而WebPack更關注模塊劃分以及模塊之間的依賴關係。

    2. Browserify：Browserify與WebPack的功能相似；它也是基於文件流的，更適合與Gulp結合使用；相較於WebPack，Browserify可以對處理過程作更精細的控制，而WebPack相對更加‘黑盒’。還有就是WebPack的生態要比Browserify好得多。

  • 瀏覽器端模塊化

    1. SeaJs：SeaJs定義了define、module、exports、require等函數，使瀏覽器內能夠執行加載模塊的語法（本質上是在頁面內插入新的script標籤，加載模塊js）。

    2. RequireJs：RequireJs與SeaJs的功能基本相同，但RequireJs聽從AMD規範，而SeaJs聽從CMD規範；而且二者異步加載的js的執行時機也有差異。