gulp与webpack对比

作者：寸志
链接：https://www.zhihu.com/question/45536395/answer/164361274
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

gulp 最核心的功能：

1. 任务定义和组织；
2. 基于文件 stream 的构建；
3. 插件体系；

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 最核心的功能：

1. 按照模块的依赖构建目标文件；
2. loader 体系支持不同的模块；
3. 插件体系提供更多额外的功能；

上张官方的 what-is-webpack.png:

图里已经表达清楚了:

1. 需要把各种资源（js/ts/css/html/ejs/img/fonts等等）都看成 module；
2. 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 任务去做压缩，加版本号，替换等等其他工作。