gulp與webpack的區別

常有人拿gulp與webpack來比較，知道這兩個構建工具功能上有重疊的地方，可單用，也可一起用，但本質的區別就沒有那麼清晰。

gulp

gulp強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如檔案壓縮合併、雪碧圖、啟動server、版本控制等），然後定義執行順序，來讓gulp執行這些task，從而構建專案的整個前端開發流程。

ps：簡單說就乙個task runner

webpack

webpack是乙個前端模組化方案，更側重模組打包，我們可以把開發中的所有資源（、js檔案、css檔案等）都看成模組，通過loader（載入器）和plugins（外掛程式）對資源進行處理，打包成符合生產環境部署的前端資源。

ps：webpack is a module bundle

相同功能

gulp與webpack可以實現一些相同功能，如下（列舉部分）：

功能gulp

webpack

檔案合併與壓縮（css）

使用gulp-minify-css模組

gulp.task('sass',function());

樣式合併一般用到extract-text-webpack-plugin外掛程式，

壓縮則使用webpack.optimize.uglifyjsplugin。

檔案合併與壓縮（js）

使用gulp-uglify和gulp-concat兩個模組

js合併在模組化開始就已經做，

壓縮則使用webpack.optimize.uglifyjsplugin

sass/less預編譯

使用gulp-sass/gulp-less 模組

sass-loader/less-loader 進行預處理

啟動server

使用gulp-webserver模組

var webserver =require('gulp-webserver');

gulp.task('webserver',function(),

}));

});使用webpack-dev-server模組

module.exports =

}版本控制

使用gulp-rev和gulp-rev-collector兩個模組

將生成檔案加上hash值

module.exports = ,

plugins:[

......

new extracttextplugin(style.[hash].css")]}

兩者區別

雖然都是前端自動化構建工具，但看他們的定位就知道不是對等的。

gulp嚴格上講，模組化不是他強調的東西，他旨在規範前端開發流程。

webpack更是明顯強調模組化開發，而那些檔案壓縮合併、預處理等功能，不過是他附帶的功能。總結

gulp應該與grunt比較，而webpack應該與browserify（網上太多資料就這麼說，這麼說是沒有錯，不過單單這樣一句話並不能讓人清晰明了）。

gulp與webpack上是互補的，還是可替換的，取決於你專案的需求。如果只是個vue或react的單頁應用，webpack也就夠用；如果webpack某些功能使用起來麻煩甚至沒有（雪碧圖就沒有），那就可以結合gulp一起用。