使用 watchify 构建快速的 browserify 项目

随着 browserify 项目的扩展，打包所需的时间会逐渐变长。虽然一开始可能只需要1秒，但在特别大的项目中，你可能需要等待30秒才能完成项目构建。

这就是为什么 substack 编写了 watchify，一个持久化的 browserify 打包工具，它会监视文件变化并只重新构建需要更新的部分。这样，第一次构建可能仍然需要30秒，但后续的构建可以在100毫秒内完成 - 这是一个巨大的改进。

Watchify 没有 gulp 插件，也不需要：你可以使用 vinyl-source-stream 将打包流导入到你的 gulp 管道中。

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var log = require('gulplog');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');

// 在这里添加自定义 browserify 选项
var customOpts = {
  entries: ['./src/index.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));

// 在这里添加转换
// 例如 b.transform(coffeeify);

gulp.task('js', bundle); // 这样你可以运行 `gulp js` 来构建文件
b.on('update', bundle); // 在任何依赖更新时，运行打包器
b.on('log', log.info); // 将构建日志输出到终端

function bundle() {
  return b.bundle()
    // 如果发生错误，记录错误日志
    .on('error', log.error.bind(log, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // 可选，如果不需要缓冲文件内容，可以移除
    .pipe(buffer())
    // 可选，如果不想要 sourcemaps，可以移除
    .pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件加载映射
       // 在这里向管道添加转换任务
    .pipe(sourcemaps.write('./')) // 写入 .map 文件
    .pipe(gulp.dest('./dist'));
}