Package

打包工具

在项目开发中，一般都会在 src 开发环境目录开发，开发完毕后打包到 dist 生成使用目录。在开发环境中，我们可以根据我们代码的规范，使用各种预处理器来书写代码。在代码完毕之后，通过工具转译、压缩、添加后缀到生产环境使用。

工具

目前主流的打包工具有：

方案

打包方案选择用 gulp + webpack 。会有疑问为什么使用两者，而不是只使用gulp 或者 webpack ? 这里引用寸大知乎回答。

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

gulp 最核心的功能：

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

gulp 本身对具体的构建任务可以没有任何的要求。但通常是文件流操作。可以这么说，gulp 适合于任何基于 JavaScript 构建的场合，无论是前端还是后端（Node.js）；甚至可以在 gulp 里直接调用 Webpack 。

webpack 最核心的功能：

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

把各种资源（js/ts/css/html/ejs/img/fonts等等）都看成 module；module 之间必须是互相依赖的，在 js 里 import 模板、图片、样式文件等等，样式文件通过 url() 和图片字体关联；这种依赖关系必须是 webpack 既定的或者是通过插件可以理解的关系。

Webpack 的核心就是模块化地组织，模块化地依赖，然后模块化地打包。相对来上，场景局限在前端模块化打包上；虽然用 gulp + 插件的方式也能实现，但目前看 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，请确保模块化，模块之间充分依赖。除此之外的构建工作，都应该交给 gulp 继续完成。目前大点的项目，Webpack 和 gulp 都是同时存在的，只是各自负责擅长的那部分，比如 Webpack 将模块的、互相依赖的分散的代码打包成数个文件，然后再使用 gulp 任务去做压缩，加版本号，替换等等其他工作。

在我们开发框架的时候，我们只涉及到JS的模块，而不会涉及到图片及及其相关模块，建议使用 rollup。

# Package

# 工具

# 方案

Package

工具

方案