gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
- 构建工具
- 自动化
- 提高效率用
webpack是文件打包工具，可以把项目的各种js、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
- 打包工具
- 模块化识别
- 编译模块代码方案用
相同功能
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一起用。
——————————————————————————————————————————————
