常有人拿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(){ gulp.src(cssFiles) .pipe(sass().on('error',sass.logError)) .pipe(require('gulp-minify-css')()) .pipe(gulp.dest(distFolder)); }); |
樣式合並一般用到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(){ gulp.src('./') .pipe(webserver({ host:'localhost', port:8080, livereload:true, //自動刷新 directoryListing:{ enable: true, path:'./' }, })); }); |
使用webpack-dev-server模塊 module.exports = { ...... devServer: { contentBase: "build/", port:8080, inline: true //實時刷新 } } |
| 版本控制 | 使用gulp-rev和gulp-rev-collector兩個模塊 | 將生成文件加上hash值 module.exports = { ...... output: { ...... filename: "[name].[hash:8].js" }, plugins:[ ...... new ExtractTextPlugin(style.[hash].css") ] } |
兩者區別
雖然都是前端自動化構建工具，但看他們的定位就知道不是對等的。
gulp嚴格上講，模塊化不是他強調的東西，他旨在規范前端開發流程。
webpack更是明顯強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
總結
gulp應該與grunt比較，而webpack應該與browserify（網上太多資料就這么說，這么說是沒有錯，不過單單這樣一句話並不能讓人清晰明了）。
gulp與webpack上是互補的，還是可替換的，取決於你項目的需求。如果只是個vue或react的單頁應用，webpack也就夠用；如果webpack某些功能使用起來麻煩甚至沒有（雪碧圖就沒有），那就可以結合gulp一起用。
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。