Wie man mit Browserify und Gulp mehrere Bundles ausgibt

Question

Ich habe Browserify, das Dateien bündelt, und es funktioniert großartig. Aber was ist, wenn ich mehrere Bundles generieren muss?

Ich möchte dist/appBundle.js und dist/publicBundle.js erstellen

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

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

});

Offensichtlich wird das nicht funktionieren, da ich nur eine Ausgabe (bundle.js) angebe. Ich kann dies erreichen, indem ich die obige Anweisung wiederhole (aber es fühlt sich nicht richtig an, wegen der Wiederholung):

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

});

Gibt es einen besseren Weg, um damit umzugehen? Danke!

Answer 1

Ich habe gerade keine gute Umgebung, um das jetzt zu testen, aber ich denke, es würde ungefähr so aussehen:

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

});

EDIT: Mir ist gerade aufgefallen, dass ich die Frage falsch verstanden habe, es sollten zwei separate Bundles aus zwei separaten .js-Dateien erstellt werden. Angesichts dessen sieht die beste Alternative, die ich mir vorstellen kann, wie folgt aus:

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

gulp.task("js", function (done) {
  [
    "app",
    "public",
  ].forEach(function (entry, i, entries) {
    // Zähle verbleibende Bündelungsvorgänge, um zu verfolgen
    // wann done() aufgerufen werden soll. Alternativ könnte auch
    // merge-stream verwendet und dessen Ausgabe zurückgegeben werden.
    entries.remaining = entries.remaining || entries.length;

    browserify('./js/' + entry + '.js')
      .bundle()
      // Wenn Sie nach dem Bündeln gulp-Plugins verwenden müssen, können Sie
      // stattdessen hier zu vinyl-source-stream und gulp.dest() pipeen
      .pipe(
        require('fs').createWriteStream('./dist/' + entry + 'Bundle.js')
        .on('finish', function () {
          if (! --entries.remaining) done();
        })
      );
  });
});

Dies ist ähnlich wie die Antwort von @urban_racoons, aber mit einigen Verbesserungen:

• Diese Antwort wird scheitern, sobald Sie möchten, dass die Aufgabe eine Abhängigkeit einer anderen Aufgabe in gulp 3 ist oder Teil einer Serie in gulp 4 ist. Diese Antwort verwendet eine Rückruffunktion, um das Signal für den Abschluss der Aufgabe zu setzen.
• Der JS-Code kann einfacher sein und erfordert kein Unterstrich.

Diese Antwort basiert auf der Annahme, dass eine bekannte Liste von Eingabedateien für jedes Bundle vorhanden ist, im Gegensatz zu beispielsweise der Notwendigkeit, eine Liste von Eingabedateien zu globben.

Answer 3

Mehrere Bundles mit gemeinsamen Abhängigkeiten

Ich habe kürzlich Unterstützung für mehrere Bundles mit gemeinsamen Abhängigkeiten zu https://github.com/greypants/gulp-starter hinzugefügt

Hier ist das Array von Browserify Konfigurationsobjekten, die ich an meine Browserify-Aufgabe übergebe. Am Ende dieser Aufgabe durchlaufe ich jede Konfiguration und führe Browserify für alles durch.

config.bundleConfigs.forEach(browserifyThis);

browserifyThis nimmt ein bundleConfig-Objekt und führt Browserify aus (mit watchify im Dev-Modus).

Dies ist der Teil, der gemeinsame Abhängigkeiten herausfiltert:

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

Diese Browserify-Aufgabe meldet auch ordnungsgemäß, wenn alle Bundles fertig sind (das obige Beispiel gibt keine Streams zurück oder löst den Rückruf der Aufgabe aus) und verwendet watchify im Dev-Modus für schnelle Neucompilierungen.

Der letzte Kommentar von Brian FitzGerald trifft den Nagel auf den Kopf. Denken Sie daran, dass es nur JavaScript ist!