web-dev-qa-db-ja.com

browserifyとgulpで複数のバンドルを出力する方法

私はbrowserifyにファイルを束ねてあり、うまく機能しています。しかし、複数のバンドルを生成する必要がある場合はどうなりますか？

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"));

});

1つの出力（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"));

});

これに取り組むためのより良い方法はありますか？ありがとう！

javascriptnode.jsnpmgulpbrowserify
31
Brian FitzGerald

現在、これをテストするのに適した環境はありませんが、私の推測では次のようになります。

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

});

編集：私はちょうど私が質問を間違って読んだことに気付いた、2つの別々の.jsファイルから来る2つの別々のバンドルがあるはずです。それに照らして、私が考えることができる最高の代替案は次のように見えます：

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"]);
});
23
urban_raccoons

共有依存関係を持つ複数のバンドル

最近、共有依存関係を持つ複数のバンドルのサポートを https://github.com/greypants/gulp-starter に追加しました

ここにbrowserifyの配列があります configオブジェクト 私は browserifyタスク に渡します。そのタスクの最後に、各構成を繰り返し処理し、すべてのものをブラウザーで確認します。

config.bundleConfigs.forEach(browserifyThis);

browserifyThisはbundleConfigオブジェクトを取り、browserifyを実行します（devify if 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タスクも適切に すべてのバンドルが終了したときにレポートする （上記の例はストリームを返さない、またはタスクのコールバックを起動しない）、および watchifyを使用する devModeで超高速の場合再コンパイルします。

ブライアン・フィッツジェラルドの最後のコメントはスポットです。 JavaScriptにすぎないことを忘れないでください！

3
Dan Tello
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はよりシンプルにすることができ、アンダースコアを必要としません。

この答えは、たとえば、エントリファイルのリストをグロブする必要があるのとは対照的に、各バンドルのエントリファイルの既知のリストがあるという前提に基づいています。

3
JMM