Question

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

所以我真正想做的是：

获取js/app/**.js，将其捆绑到js/bundle/，并将常见的依赖项提取到js/bundle/common.js。另外，uglify所有内容并添加源地图。

好。浏览器有点支持浏览器似乎很差，至少我的谷歌研究非常令人失望。

反正。到目前为止我得到了什么。

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模式了。我可以找到official recipe，它告诉我如何使用管道添加其他转换，如uglify。但它只适用于单个文件。

Answer 1

作为factor-bundle的输出参数，使用流而不是文件路径。你可以用溪流做任何你想做的事。

  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/'))

Answer 2

感谢Liero的回答，我的工作非常相似。这是完整的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));

});

使用glob和uglify / factor-bundle吞下Browserify

2 个答案: