web-dev-qa-db-fra.com

comment sortir plusieurs bundles avec browserify et gulp

J'ai browserify regroupant des fichiers et cela fonctionne très bien. Mais que faire si j'ai besoin de générer plusieurs bundles?

Je voudrais finir avec dist/appBundle.js et dist/publicBundle.js

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

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

});

Évidemment, cela ne fonctionnera pas car je ne spécifie qu'une seule sortie (bundle.js). Je peux accomplir cela en répétant la déclaration ci-dessus comme ça (mais cela ne semble pas correct, à cause de la répétition):

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

});

Existe-t-il une meilleure façon de résoudre ce problème? Merci!

javascriptnode.jsnpmgulpbrowserify
32
Brian FitzGerald

Je n'ai pas un bon environnement pour tester cela en ce moment, mais je suppose que cela ressemblerait à quelque chose comme:

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: Je viens de réaliser que j'ai mal lu la question, il devrait y avoir deux bundles distincts provenant de deux fichiers .js distincts. À la lumière de cela, la meilleure alternative à laquelle je peux penser ressemble à:

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

Plusieurs bundles avec des dépendances partagées

J'ai récemment ajouté la prise en charge de plusieurs bundles avec des dépendances partagées à https://github.com/greypants/gulp-starter

Voici le tableau de browserify objets de configuration Je passe à mon tâche browserify . À la fin de cette tâche, j'itère chaque configuration, en explorant toutes les choses.

config.bundleConfigs.forEach(browserifyThis);

browserifyThis prend un objet bundleConfig et exécute browserify (avec watchify if dev mode).

C'est le bit qui trie les dépendances partagées :

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

Cette tâche browserify également correctement signale lorsque tous les bundles sont terminés (l'exemple ci-dessus ne renvoie pas de flux ou ne déclenche pas le rappel de la tâche), et tilise watchify lorsqu'il est en devMode pour super rapide recompile.

Le dernier commentaire de Brian FitzGerald est parfait. N'oubliez pas que c'est juste du 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();
        })
      );
  });
});

Ceci est similaire à la réponse @urban_racoons, mais avec quelques améliorations:

  • Cette réponse échouera dès que vous voudrez que la tâche soit une dépendance d'une autre tâche dans gulp 3, ou une partie d'une série dans gulp 4. Cette réponse utilise un rappel pour signaler l'achèvement de la tâche.
  • Le JS peut être plus simple et ne nécessite pas de soulignement.

Cette réponse est basée sur la prémisse d'avoir une liste connue de fichiers d'entrée pour chaque paquet, par opposition, par exemple, à la nécessité de glober une liste de fichiers d'entrée.

3
JMM