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

gulp

gulp強調(diào)的是前端開發(fā)的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如文件壓縮合并、雪碧圖、啟動server、版本控制等），然后定義執(zhí)行順序，來讓gulp執(zhí)行這些task，從而構建項目的整個前端開發(fā)流程。

PS：簡單說就一個Task Runner

webpack

webpack是一個前端模塊化方案，更側(cè)重模塊打包，我們可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源。

PS：webpack is a module bundle

相同功能

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

功能	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合并在模塊化開始就已經(jīng)做， 壓縮則使用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") ???? ] }

兩者區(qū)別

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

gulp嚴格上講，模塊化不是他強調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。

webpack更是明顯強調(diào)模塊化開發(fā)，而那些文件壓縮合并、預處理等功能，不過是他附帶的功能。

總結

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

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

?

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/6413546.html? ? ??

總結

以上是生活随笔為你收集整理的gulp与webpack的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。