cómo generar múltiples paquetes con browserify y gulp

Question

cómo generar múltiples paquetes con browserify y gulp

Tengo browserify empaquetando archivos y está funcionando muy bien. Pero, ¿qué pasa si necesito generar varios paquetes?

Me gustaría terminar con dist/appBundle.js y dist/publicBundle.js

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

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

});

Obviamente esto no va a funcionar ya que solo estoy especificando una salida (bundle.js). Puedo lograr esto repitiendo la declaración anterior de esta manera (pero no se siente bien, debido a la repetición):

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

});

¿Hay una mejor manera de abordar esto? ¡Gracias!

30

javascript node.js npm gulp browserify

Author: Brian FitzGerald, 2014-05-23

Source

3 answers

Múltiples paquetes con dependencias compartidas

Recientemente agregué soporte para múltiples paquetes con dependencias compartidas a https://github.com/greypants/gulp-starter

Aquí está la matriz de objetos de configuración de browserify Paso a mi tarea de browserify . Al final de esa tarea, itero sobre cada configuración, browserifying todas las cosas.

config.bundleConfigs.forEach(browserifyThis);

browserifyThis toma un objeto BundleConfig y ejecuta browserify (con watchify if dev mode).

Esto es el bit que ordena las dependencias compartidas :

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

Esta tarea browserify también correctamente informa cuando todos los paquetes están terminados (el ejemplo anterior no devuelve flujos o dispara la devolución de llamada de la tarea), y usa watchify cuando está en devMode para recompilas súper rápidas.

El último comentario de Brian FitzGerald es perfecto. Recuerde que es solo JavaScript!

3

Author: Dan Tello,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-14 16:01:00

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

Esto es similar a la respuesta de @urban_racoons, pero con algunas mejoras:

Esa respuesta fallará tan pronto como desee que la tarea sea una dependencia de otra tarea en gulp 3, o parte de una serie en gulp 4. Esta respuesta utiliza una devolución de llamada para indicar la finalización de la tarea.
El JS puede ser más simple y no requiere subrayado.

Esta respuesta se basa en la premisa de tener una lista conocida de archivos de entrada para cada paquete, en lugar de, digamos, necesitar globalizar una lista de archivos de entrada.

3

Author: JMM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-10 14:20:53

score 23 · Accepted Answer

No tengo un buen ambiente para probar esto en este momento, pero mi conjetura es que se vería algo como:

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

});

EDITAR: Acabo de darme cuenta de que mal-leer la pregunta, debe haber dos paquetes separados que vienen de dos separados .archivos js. A la luz de eso, la mejor alternativa que se me ocurre es:

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