如何使用Gulp.js将stream保存到多个目的地？

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

目前不支持file.contents是stream时pipe道到多个目标。 什么是这个问题的解决方法？

Answer 1

当使用file.contents作为stream时，目前您必须为每个dest使用两个stream。 这将可能在未来得到修复。

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

编辑：这个错误现在已经被修复了。 原始post中的代码应该可以正常工作。

Answer 2

我正面临类似的问题，并希望在lint，uglify和minify任务之后，将gulp源复制到多个位置。 我最终解决了这个问题，

 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 3

我觉得这样比较容易。 Justo你有两个目的地，但是在minify插件之前，你把一个path放到正常的文件中，然后你把minify插件按照你想要的一个minify文件的path。

例如：

 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 4

我与Gulp有很多相同的问题，因为pipe道到多个目的地的各种任务似乎很难或者不可能。 另外，为一个任务设置多个stream似乎效率低下，但我想这是现​​在的解决scheme。

对于我目前的项目，我需要多个捆绑与各种页面相关联。 修改Gulp Starter

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

browserify / watchify任务：

dtothefp/gulp-assemble-browserify/blob/master/gulp/tasks/browserify.html

我在glob模块callback中使用了一个forEach循环：

 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 5

对于将更新广播到多个目的地的情况，将gulp.dest命令循环到目的地arrays上效果很好。

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