javascript - online - ¿Cómo guardar una secuencia en múltiples destinos con Gulp.js?

browserify vs webpack

Question

var gulp = require(''gulp'');
var $ = require(''gulp-load-plugins'')();
var source = require(''vinyl-source-stream'');
var browserify = require(''browserify'');

gulp.task(''scripts'', function () {
  return browserify(''./src/app.js'').bundle()
    .pipe(source(''app.js''))
    .pipe(gulp.dest(''./build''))       // OK. app.js is saved.
    .pipe($.rename(''app.min.js''))
    .pipe($.streamify($.uglify())
    .pipe(gulp.dest(''./build''));      // Fail. app.min.js is not saved.
});

Actualmente, no se admite la conexión a múltiples destinos cuando file.contents es una transmisión. ¿Qué es una solución para este problema?

Answer 1

Actualmente, debe usar dos flujos para cada dest cuando use file.contents como una secuencia. Esto probablemente será arreglado en el futuro.

var gulp       = require(''gulp'');
var rename     = require(''gulp-rename'');
var streamify  = require(''gulp-streamify'');
var uglify     = require(''gulp-uglify'');
var source     = require(''vinyl-source-stream'');
var browserify = require(''browserify'');
var es         = require(''event-stream'');

gulp.task(''scripts'', function () {
    var normal = browserify(''./src/index.js'').bundle()
        .pipe(source(''bundle.js''))
        .pipe(gulp.dest(''./dist''));

    var min = browserify(''./src/index.js'').bundle()
        .pipe(rename(''bundle.min.js''))
        .pipe(streamify(uglify())
        .pipe(gulp.dest(''./dist''));

    return es.concat(normal, min);
});

EDITAR: Este error ahora está arreglado en trago. El código en tu publicación original debería funcionar bien.

Answer 2

Creo que de esta manera es más fácil. Justo tienes dos destinos, pero antes del complemento minify, pones una ruta al archivo normal y si pones el complemento minify sigue la ruta en la que quieres tener un archivo minify.

por ejemplo:

gulp.task(''styles'', function() {

    return gulp.src(''scss/main.scss'')
    .pipe(sass())
    .pipe(gulp.dest(''css'')) // Dev normal CSS
    .pipe(minifycss())
    .pipe(gulp.dest(''public_html/css'')); // Live Minify CSS

});

Answer 3

He tenido el mismo problema con Gulp, para varias tareas la conexión a múltiples destinos parece difícil o potencialmente imposible. Además, la configuración de múltiples flujos para una tarea parece ineficaz, pero supongo que esta es la solución por ahora.

Para mi proyecto actual, necesitaba varios paquetes para asociar con varias páginas. Modificando el arranque Gulp

https://github.com/greypants/gulp-starter

Navegar / Verificar tarea:

https://github.com/dtothefp/gulp-assemble-browserify/blob/master/gulp/tasks/browserify.js

Usé un ciclo forEach dentro de la devolución de llamada del módulo glob:

gulp.task(''browserify'', function() {

  var bundleMethod = global.isWatching ? watchify : browserify;

  var bundle = function(filePath, index) {
    var splitPath = filePath.split(''/'');
    var bundler = bundleMethod({
      // Specify the entry point of your app
      entries: [filePath],
      // Add file extentions to make optional in your requires
      extensions: [''.coffee'', ''.hbs'', ''.html''],
      // Enable source maps!
      debug: true
    });

    if( index === 0 ) {
      // Log when bundling starts
      bundleLogger.start();
    }

    bundler
      .transform(partialify)
      //.transform(stringify([''.html'']))
      .bundle()
      // Report compile errors
      .on(''error'', handleErrors)
      // Use vinyl-source-stream to make the
      // stream gulp compatible. Specifiy the
      // desired output filename here.
      .pipe(source( splitPath[splitPath.length - 1] ))
      // Specify the output destination
      .pipe(gulp.dest(''./build/js/pages''));

    if( index === (files.length - 1) ) {
      // Log when bundling completes!
      bundler.on(''end'', bundleLogger.end);
    }

    if(global.isWatching) {
      // Rebundle with watchify on changes.
      bundler.on(''update'', function(changedFiles) {
        // Passes an array of changed file paths
        changedFiles.forEach(function(filePath, index) {
          bundle(filePath, index);
        });
      });
    }
  }

  // Use globbing to create multiple bundles
  var files = glob(''src/js/pages/*.js'', function(err, files) {
    files.forEach(function(file, index) {
      bundle(process.cwd() + ''/'' + file, index);
    })
  });

});

Answer 4

Me enfrentaba a un problema similar y quería que la fuente de gulp se copiara en varias ubicaciones después de las tareas de pelusa, uglify y minify. Terminé resolviendo esto como a continuación,

gulp.task(''script'', function() {
  return gulp.src(jsFilesSrc)
    // lint command
    // uglify and minify commands
    .pipe(concat(''all.min.js''))
    .pipe(gulp.dest(''build/js'')) // <- Destination to one location
    .pipe(gulp.dest(''../../target/build/js'')) // <- Destination to another location
});

Answer 5

Para el caso de la transmisión de actualizaciones a múltiples destinos, el bucle del comando gulp.dest sobre una matriz de destinos funciona bien.

var gulp = require(''gulp'');

var source = ''./**/*'';

var destinations = [
    ''../foo/dest1'',
    ''../bar/dest2''
];

gulp.task(''watch'', function() {
    gulp.watch(source, [''sync'']);
});

gulp.task(''sync'', function (cb) {
    var pipeLine = gulp.src(source);

    destinations.forEach(function (d) {
        pipeLine = pipeLine.pipe(gulp.dest(d));
    });

    return pipeLine;
});