常有人拿gulp與webpack來比較，知道這兩個構建工具功能上有重疊的地方，可單用，也可一起用，但本質的區別就沒有那么清晰。 ## Gulp gulp強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如文件壓縮合并、雪碧圖、啟動server、版本控制等），然后定義執行順序，來讓gulp執行這些task，從而構建項目的整個前端開發流程。 *PS：簡單說就一個Task Runner，就是用來跑一個一個任務的* 問題：沒發解決的是 js module 的問題，是你寫代碼時候如何組織代碼結構的問題. ## Webpack webpack是一個前端模塊化方案，更側重模塊打包，我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。 *PS：webpack is a module bundle* ## 相同點與不同點 **相同點**：文件合并與壓縮（css,js），sass/less預編譯，啟動server，版本控制。 **不同點** 雖然都是前端自動化構建工具，但看他們的定位就知道不是對等的。 gulp嚴格上講，模塊化不是他強調的東西，他旨在規范前端開發流程。 webpack更是明顯強調模塊化開發，而那些文件壓縮合并、預處理等功能，不過是他附帶的功能。