gulp与webpack对比

作者：寸志

链接：https://www.zhihu.com/question/45536395/answer/164361274

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

gulp 是 task runner，Webpack 是 module bundler。可以这么说， Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代，或者直接说和对方不重叠的。

gulp 最核心的功能：

任务定义和组织；
基于文件 stream 的构建；
插件体系；
gulp 本身对具体的构建任务可以没有任何的要求。但通常是文件流操作。

当然也可以编写 gulp 任务来启动服务器，打开浏览器，调用ssh/ftp发布生产服务器等等，笔者挺反对这种什么事情都交给 gulp 来做的方式，gulp 更多的还是集中在构建这一块。
可以这么说，gulp 适合于任何基于 JavaScript 构建的场合，无论是前端还是后端（Node.js）；甚至可以在 gulp 里直接调用 Webpack 呀：

var webpack = require('gulp-webpack');
gulp.task('default', function() {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});

webpack 最核心的功能：

按照模块的依赖构建目标文件；
loader 体系支持不同的模块；
插件体系提供更多额外的功能；
上张官方的 what-is-webpack.png:



图里已经表达清楚了:

需要把各种资源（js/ts/css/html/ejs/img/fonts等等）都看成 module；
module 之间必须是互相依赖的，在 js 里 import 模板、图片、样式文件等等，样式文件通过 url() 和图片字体关联；这种依赖关系必须是 webpack 既定的或者是通过插件可以理解的关系。
Webpack 的核心就是模块化地组织，模块化地依赖，然后模块化地打包。相对来上，场景局限在前端模块化打包上；虽然用 gulp + 插件的方式也能实现，但目前看 Webpack 在依赖的模块化构建上是无人能够替代的。

其他答主提到的热替换，也只是 Webpack 的附加功能，也不是所有的组件都可以热替换不刷新。
请问两者有哪些功能是重叠的？

基于模块依赖的构建这方面，虽然 gulp 也可以实现，但交给更专业的 Webpack 来做；甚至可以使用
shama/webpack-stream 来把 Webpack 封装成 gulp 任务；

其他功能，例如文件压缩，Webpack 也有自己的
UglifyJsPlugin 插件，gulp 也有

gulp-uglify，通常答主会选择 gulp 来实现，因为 gulp 除此之外还有更多的比如 CSS 压缩，图片压缩等等可用；

哪些功能是不能被对方替代的？

Webpack 之前，做模块化依赖构建的有 Browserify。可以使用
Browserify 的 gulp 插件

deepak1556/gulp-browserify 结合上 Browserify 的插件

substack/node-browserify 实现 Webpack 提供的基于模块依赖的构建。只是 Webpack 功能完善更强大，所以这方面的事情，交给 Webpack 搞。

核心功能无法替代，gulp 任务定义和管理 Webpack 做不到，Webpack 基于模块的依赖构建 gulp 做不好。举几个例子：

用
gulp-rev-all 来做所有资源引用的版本号替换：

gulp.task('build', function () {
var revAll = new RevAll({
prefix: 'http://xxxxx.clouddn.com',
dontRenameFile: ['.html', '.xml', '.md', '.yml', '.ico'],
dontUpdateReference: ['.html', '.xml', '.md', '.yml', '.ico']
})
return gulp.src('dist/**')
.pipe(revAll.revision())
.pipe(gulp.dest('rev'))
})

我可以用
gulp-qiniu 来把静态文件直接发布到七牛的 CDN：

gulp.task('qiniu', function () {
return gulp.src([
'rev/css/**',
'rev/fonts/**',
'rev/js/**',
'rev/images/**'
], {base: 'rev'})
.pipe(qiniu({
accessKey: qiniuConfig.accessKey,
secretKey: qiniuConfig.secretKey,
bucket: "qianduan",
private: false
}, {
dir: '/',
concurrent: 10
}))

这两个工作，在我的场景下需要，Webpack 并做不了。当然你也可以用其他工具来实现，我管不了。

在何种情况下用哪个工具更好？

除了前端模块化开发，模块之间充分依赖的项目，都不值得用 Webpack 去构建。反之，如果要用 Webpack，请确保模块化，模块之间充分依赖。除此之外的构建工作，都应该交给 gulp 继续完成。目前大点的项目，Webpack 和 gulp 都是同时存在的，只是各自负责擅长的那部分，比如 Webpack 将模块的、互相依赖的分散的代码打包成数个文件，然后再使用 gulp 任务去做压缩，加版本号，替换等等其他工作。