Wie speichere ich mit Gulp.js einen Stream in mehrere Ziele?

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

Piping zu mehreren Zielen, wenn file.contents ein Stream ist, wird derzeit nicht unterstützt. Was ist eine Problemumgehung für dieses Problem?

Answer 1

Momentan müssen Sie zwei Streams für jedes Ziel verwenden, wenn Sie file.contents als Stream verwenden. Dies wird wahrscheinlich in der Zukunft behoben werden.

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: Dieser Fehler ist jetzt in Schluck behoben. Der Code in Ihrem ursprünglichen Post sollte gut funktionieren.

Answer 2

Ich hatte eine Menge das gleiche Problem mit Gulp, für verschiedene Aufgaben Rohrleitungen an mehrere Ziele scheint schwierig oder möglicherweise unmöglich. Auch das Einrichten mehrerer Streams für eine Aufgabe scheint ineffizient zu sein, aber ich denke, das ist die Lösung für den Moment.

Für mein aktuelles Projekt benötigte ich mehrere Bundles, die verschiedenen Seiten zugeordnet werden. Modifizieren der Gulp Starter

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

browserify/watchify Aufgabe:

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

I Innenseite des glob Modul Rückruf eine forEach Schleife verwendet:

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 3

I ähnlich war mit Blick Problem und wollte, dass die Quellquelle an mehrere Speicherorte kopiert wird, nachdem sie Aufgaben ausgeführt, verkompliziert und minimiert haben. Ich endete damit, das unten zu lösen,

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 4

Ich denke, dass dieser Weg einfacher ist. Justo Sie haben zwei Ziel, aber vor dem Minify-Plugin legen Sie einen Pfad zu der normalen Datei und die Sie das Minify-Plugin folgen dem Pfad, den Sie eine Minify-Datei haben möchten.

zum Beispiel:

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 5

Für den Fall von Updates zu mehreren Zielen Rundfunk, Looping den gulp.dest Befehl über eine Reihe von Zielen funktioniert gut.

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