Gulp 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

我现在正在进入browserify。到目前为止，我喜欢它，但在我开始使用它之前，我想让它自动化。Gulp是我选择的构建系统

所以我真正想做的是：

获取

js/app/**.js

，将其绑定到

js/bundle/

，并将公共依赖项提取到

js/bundle/common.js

。此外，丑化一切，并添加源地图

嗯。对browserify的大量支持似乎有点差，至少我的谷歌研究结果相当令人失望

无论如何。到目前为止我得到了什么

var gulp = require('gulp'),
    browserify = require('browserify'),
    factor = require('factor-bundle');

// ...

// gulp task
return browserify({
    entries: ['js/app/page1.js', 'js/app/page2.js'],
    debug: true
})
    .plugin(factor, {
        o: ['js/bundle/page1.js', 'js/bundle/page2.js']
    })
    .bundle()
    .pipe(source('common.js'))
    .pipe(gulp.dest('js/bundle/'));

---

这既不是丑化也不是添加源地图，更不用说使用glob模式了。我可以找到一个演示如何使用管道添加其他转换（如uglify）的示例。但它仅适用于单个文件。

作为因子包的输出参数，使用流而不是文件路径。你可以用这些溪流做任何你想做的事

  var indexStream = source("index.js");
  var testStream = source("tests.js");
  var commonStream = bundler.plugin('factor-bundle', { outputs: [indexStream, testStream] })
    .bundle()
    .pipe(source('common.js'));


  return merge(indexStream, commonStream, testStream)
    .pipe(buffer())
    .pipe(sourcemaps.init({ debug: true, loadMaps: true }))
    .pipe(uglify())
    .pipe(gulp.dest('js/bundle/'))

---

多亏了利耶罗的回答，我得到了非常相似的结果。以下是完整的gulpfile：

const gulp = require('gulp');
const browserify = require('browserify');
const factor = require('factor-bundle');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('gulp-buffer');
const merge = require('gulp-merge');

gulp.task('bfb', function () {

    const fejs = 'public/javascripts/'  // location of source JS
    const fejsb = fejs + 'b/';          // location of bundles
    const modules = [ // aka entry points
        'accounts',
        'invoice',
        'invoices',
        // etc...
    ];
    const inputs = [];
    const streams = [];

    modules.forEach(function (module) {
        inputs.push(fejs + module + '.js');
        streams.push(source(module + '.js'));
    });

    const bundler = browserify(inputs, {});
    const commonStream = bundler.plugin(factor, { outputs: streams })
        .bundle()
        .pipe(source('common.js'));
    streams.push(commonStream);

    return merge(streams)
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        //.pipe(uglify())  // haven't tested this bit
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(fejsb));

});

---

你做到了吗？我也对解决方案感兴趣。