具有共享依赖关系的多个包

Question

我有浏览器捆绑文件，它工作得很好。但是如果我需要生成多个包呢？

我想以dist/appBundle.js和dist/publicBundle.js

结束

gulp.task("js", function(){

    return browserify([
            "./js/app.js",
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./dist"));

});

显然，由于我只指定了一个输出（bundle.js），因此无法正常工作。我可以通过重复上述陈述来实现这一目标（但由于重复，它感觉不对）：

gulp.task("js", function(){

    browserify([
            "./js/app.js"
        ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest("./dist"));


    browserify([
            "./js/public.js"
        ])
        .bundle()
        .pipe(source("publicBundle.js"))
        .pipe(gulp.dest("./dist"));

});

有没有更好的方法来解决这个问题？谢谢！

Answer 1

我现在没有良好的环境来测试它，但我的猜测是它看起来像：

gulp.task("js", function(){
    var destDir = "./dist";

    return browserify([
        "./js/app.js",
        "./js/public.js"
    ])
        .bundle()
        .pipe(source("appBundle.js"))
        .pipe(gulp.dest(destDir))
        .pipe(rename("publicBundle.js"))
        .pipe(gulp.dest(destDir));

});

编辑：我刚刚意识到我误读了这个问题，应该有两个独立的捆绑包来自两个独立的.js文件。鉴于此，我能想到的最佳替代方案如下：

gulp.task("js", function(){
    var destDir = "./dist";

    var bundleThis = function(srcArray) {
        _.each(srcArray, function(source) {
            var bundle = browserify(["./js/" + source + ".js"]).bundle();
            bundle.pipe(source(source + "Bundle.js"))
                  .pipe(gulp.dest(destDir));
        });
    };

    bundleThis(["app", "public"]);
});

Answer 2

具有共享依赖关系的多个包

我最近添加了对具有共享依赖关系的多个捆绑包的支持https://github.com/greypants/gulp-starter

这是我传递给config objects的browserify browserify task数组。在该任务结束时，我遍历每个配置，浏览所有内容。

config.bundleConfigs.forEach(browserifyThis);

browserifyThis接受一个bundleConfig对象，然后运行browserify（如果是dev模式则使用watchify）。

这是sorts out shared dependencies：

的位

// Sort out shared dependencies.
// b.require exposes modules externally
if(bundleConfig.require) b.require(bundleConfig.require)
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if(bundleConfig.external) b.external(bundleConfig.external)

此浏览器任务也正确reports when all bundles are finished（上面的示例不是返回流或触发任务的回调），而uses watchify在devMode中进行超快速重新编译。< / p>

Brian FitzGerald的最后评论是现场评论。请记住，它只是JavaScript！

Answer 3

gulp.task("js", function (done) {
  [
    "app",
    "public",
  ].forEach(function (entry, i, entries) {
    // Count remaining bundling operations to track
    // when to call done(). Could alternatively use
    // merge-stream and return its output.
    entries.remaining = entries.remaining || entries.length;

    browserify('./js/' + entry + '.js')
      .bundle()
      // If you need to use gulp plugins after bundling then you can
      // pipe to vinyl-source-stream then gulp.dest() here instead
      .pipe(
        require('fs').createWriteStream('./dist/' + entry + 'Bundle.js')
        .on('finish', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});

这类似于@urban_racoons的答案，但有一些改进：

如果您希望任务在gulp 3中成为另一个任务的依赖关系，或者在gulp 4中系列的一部分，那么答案将会失败。此答案使用回调来表示任务完成。
JS可以更简单，不需要下划线。

这个答案是基于为每个包提供一个已知的条目文件列表的前提，而不是需要对条目文件列表进行全局化。

如何使用browserify和gulp输出多个包

3 个答案:

具有共享依赖关系的多个包