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(){      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一塊兒用。