web-dev-qa-db-fra.com

Comment enregistrer un flux dans plusieurs destinations avec Gulp.js?

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

gulp.task('build', () =>
  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.
);

La canalisation vers plusieurs destinations lorsque file.contents est un flux n'est actuellement pas prise en charge. Qu'est-ce qu'une solution de contournement pour ce problème?

javascriptnode.jsbrowserifygulp
63
Konstantin Tarkus

Actuellement, vous devez utiliser deux flux pour chaque destination lorsque vous utilisez file.contents en tant que flux. Ce sera probablement résolu dans le futur.

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

EDIT: Ce bogue est maintenant corrigé dans gulp. Le code de votre message d'origine devrait fonctionner correctement.

34
Contra

J'étais confronté à un problème similaire et je voulais que la source de gulp soit copiée à plusieurs endroits après la tâche, les fibres et les tâches. J'ai fini par résoudre ceci comme ci-dessous,

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
});
28
Anmol Saraf

Je pense que cette façon est plus facile. Justo, vous avez deux destinations, mais avant le plugin minify, vous mettez un chemin vers le fichier normal et le plugin minify suit le chemin vers lequel vous voulez avoir un fichier minify.

par exemple:

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

});
4
Luis Chiappe

Dans le cas de la diffusion de mises à jour vers plusieurs destinations, en boucle le gulp.dest La commande sur un tableau de destinations fonctionne 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;
});
3
davidmdem

J'ai eu beaucoup de problèmes similaires avec Gulp, car diverses tâches, diriger vers diverses destinations, semble difficile, voire impossible. En outre, configurer plusieurs flux pour une tâche semble inefficace, mais je suppose que c'est la solution pour l'instant.

Pour mon projet actuel, il fallait associer plusieurs ensembles à différentes pages. Modification du démarreur Gulp

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

tâche browserify/watchify:

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

J'ai utilisé une boucle forEach à l'intérieur du rappel du module 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);
    })
  });

});
0
dtothefp