如何使用browserify和gulp輸出多個包

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

具有共享依賴關系的多個包

我最近添加了對具有共享依賴關系的多個bundle的支持到https://github.com/greypants/gulp-starter

這是我傳遞給browserify任務的browserify 配置對象數組。 在該任務結束時，我遍歷每個配置，瀏覽所有內容。

config.bundleConfigs.forEach(browserifyThis);

browserifyThis需要bundleConfig對象，並且運行browserify（與watchify如果dev的模式）。

這是排除共享依賴項的位：

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

這個browserify任務還可以正確地報告所有bundle的完成時間 （上面的例子沒有返回流或觸發任務的回調），並在devMode中使用 watchify進行超快速重新編譯。

布萊恩菲茨傑拉德的最后評論是現貨。 請記住，它只是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可以更簡單，不需要下划線。

這個答案基於為每個包提供一個已知的條目文件列表的前提，而不是需要對條目文件列表進行全局化。