Browserify + Globs

Browserify + Uglify2 展示了如何设置一个基本的 gulp 任务，将 JavaScript 文件与其依赖项打包，并使用 UglifyJS 压缩捆绑包，同时保留源映射。 然而，它没有展示如何在多个入口文件的情况下使用 gulp 和 Browserify。

另见：合并流来处理错误配方，用于处理流中 Browserify 或 UglifyJS 的错误。

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var globby = require('globby');
var through = require('through2');
var log = require('gulplog');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var reactify = require('reactify');

gulp.task('javascript', function () {
  // gulp 期望任务返回一个流，所以我们在这里创建一个。
  var bundledStream = through();

  bundledStream
    // 将输出的捆绑流转换为包含
    // gulp 插件期望的普通属性的流。
    .pipe(source('app.js'))
    // gulp 任务的其余部分，就像您通常编写的那样。
    // 这里我们从 Browserify + Uglify2 配方中复制。
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
      // 在此处向管道添加 gulp 插件。
      .pipe(uglify())
      .on('error', log.error)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/js/'));

  // "globby" 替代了通常的 "gulp.src"，因为 Browserify
  // 创建了自己的可读流。
  globby(['./entries/*.js']).then(function(entries) {
    // 创建 Browserify 实例。
    var b = browserify({
      entries: entries,
      debug: true,
      transform: [reactify]
    });

    // 将 Browserify 流注入我们之前创建的流
    // 这启动了我们的 gulp 管道。
    b.bundle().pipe(bundledStream);
  }).catch(function(err) {
    // 确保处理来自 globby 的任何错误
    bundledStream.emit('error', err);
  });

  // 最后，我们返回流，这样 gulp 就知道这个任务何时完成。
  return bundledStream;
});