Javascript 对因子束进行一些操作'；s部分丛

我正在使用带有browserify和factor bundle的gulp。 我有以下代码：

b = browserify({
        entries: [ 'a.js', 'b.js'],
        plugin: [ [ 'factor-bundle', { outputs: [ 'build/a.js', 'build/b.js' ] } ] ]
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest('/build/common'));

我想在parial bundle（'build/a.js'和'build/b.js'）上执行一些操作（如uglify、bundle collapser或其他作业）。我尝试使用factor bundle页面上描述的方法：

b.plugin('factor-bundle', { outputs: [ write('x'), write('y') ] });
function write (name) {
    return concat(function (body) {
        console.log('// ----- ' + name + ' -----');
        console.log(body.toString('utf8'));
    });
}

但是我不理解write（）方法，也不知道如何进行丑化，以及如何吞下结果。
有什么想法吗？解释？

方法

write（）

返回一个可写流，允许您创建管道束 由factor bundle插件通过进一步的下游转换生成

例如，您的

write（）

方法可能如下所示：

var path = require('path');
var file = require('gulp-file');
var sourcemaps = require('gulp-sourcemaps');

function write (filepath) {    
    return concat(function (content) {        
        // create new vinyl file from content and use the basename of the
        // filepath in scope as its basename.
        return file(path.basename(filepath), content, { src: true })
        // uglify content
        .pipe(uglify())
        // write content to build directory
        .pipe(gulp.dest('./build/scripts'))        
    });
}

browserify({
    entries: [ 'a.js', 'b.js'],
    plugin: [ [ 'factor-bundle', { outputs: [ write('a.js'), write('b.js') ] } ] ]
})
.bundle()
.pipe(write('common.js'))
// Could have use these instead, but it wouldn't be as DRY.
// .pipe(source('common.js'))
// .pipe(uglify())
// .pipe(gulp.dest('./build/scripts'))

你可以这样使用它：

var path = require('path');
var file = require('gulp-file');
var sourcemaps = require('gulp-sourcemaps');

function write (filepath) {    
    return concat(function (content) {        
        // create new vinyl file from content and use the basename of the
        // filepath in scope as its basename.
        return file(path.basename(filepath), content, { src: true })
        // uglify content
        .pipe(uglify())
        // write content to build directory
        .pipe(gulp.dest('./build/scripts'))        
    });
}

browserify({
    entries: [ 'a.js', 'b.js'],
    plugin: [ [ 'factor-bundle', { outputs: [ write('a.js'), write('b.js') ] } ] ]
})
.bundle()
.pipe(write('common.js'))
// Could have use these instead, but it wouldn't be as DRY.
// .pipe(source('common.js'))
// .pipe(uglify())
// .pipe(gulp.dest('./build/scripts'))

使用

因子包

插件会影响browserify after的输出 调用

.bundle（）

。通常，它将生成作为可读流的捆绑包 映射到每个条目文件，然后您可以进一步应用 对它们的转换

相反，您将得到一个可读的流，其中包含一个具有 从提供的条目文件中共享公共模块，我已经调用了

common.js

在上面的例子中。然后你需要处理转换 分别映射到每个条目文件的可读流的

在上面的示例中，我已将可写流添加到输出数组中，排列为 按照与我的条目文件相同的顺序，这些条目文件作为 可读的流，并对其应用进一步的转换

您还可以利用

因子。管道

：

我认为值得注意的是，将进一步的下游工作应用于输出 与管道完全分离。所以如果你喝了一大口然后回来了 来自browserify的流，任务将提前完成，因为 它仍将对条目文件执行操作。我没有遇到过 这方面的问题还没有解决

---

希望这有帮助。

这有点旧，但可能对其他人有用。 上面来自@Christian的答案帮助了我，但我必须解决任务完成的问题。为此，我为打开的流添加了一个计数器，并在它们全部关闭后调用任务回调

gulp.task('build:js:compile', function(cb) {

const apps  = getAllJavascriptFilesPaths(); // this returns an array of full path to the js files i want to bundle
const dist  = 'dist'; // the output path

const files = [];
const streams = [];
let openedStreams = 0;

// We use browserify factor-bundle to get the shared code in a separated js file, and not in all apps files
// The write function here handles the post processing of each browserified app by returning a writable stream
// We check the number of opened streams, and call the callback once they are all closed, to be sure the task is
// complete
function write(filepath) {
    openedStreams++;
    return concat(function (content) {
        // create new vinyl file from content and use the basename of the
        // filepath in scope as its basename.
        return file(path.basename(filepath), content, { src: true })
            .pipe(uglify())
            .pipe(gulp.dest(dist))
            .on('finish', function () {
                openedStreams--;
                if (openedStreams == 0) {
                    cb();
                }
            });
    });
}

apps.forEach(function (file) {
    files.push(file);
    streams.push(write(file)));
});

browserify(files)
    .plugin(factor, { outputs: streams })
    .transform("babelify", {presets: 'babel-preset-env'})
    .bundle()
    .pipe(write('common.js'));
});

---

感谢您提供详细的解决方案。知道如何解决我返回的流不代表任务完成的问题吗？