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

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

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

Answer 1

当使用file.contents作为流时，您必须为每个dest使用两个流。这可能会在未来得到解决。

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

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

Answer 2

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

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

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

browserify/watchify任务：

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

我用glob模块回调的内部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 3

我正面临类似问题并希望在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 4

我认为这种方式更容易。胡斯托你有两个目的，但缩小插件之前，你把一个路径正常的文件和你把缩小插件遵循你想有一个缩小文件的路径。

例如：

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

用于广播的更新到多个目的地，在目的地的阵列的循环gulp.dest命令的情况下工作得很好。

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