前端自動化構建工具，我個人將其分為兩類：構建工具、模塊化工具。但由於模塊化工具的功能越來越豐富，兩者之間的界限也越來越模糊。
構建工具主要有：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的執行時機也有差別。