常有人拿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 |
|---|---|---|
| 文件合并与压缩（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 |
| 启动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应该与grunt比较，而webpack应该与browserify（网上太多资料就这么说，这么说是没有错，不过单单这样一句话并不能让人清晰明了）。
gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。
网友评论