gulp與webpack的區別

%就是我發表於2018-08-10


常有人拿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可以實現一些相同功能,如下(列舉部分):

功能gulpwebpack
檔案合併與壓縮(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一起用。


相關文章