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.
);
当file.contents是流时,当前不支持管道到多个目标。这个问题的解决方法是什么?
答案 0 :(得分:34)
当使用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);
});
编辑:这个错误现在已经修复了。原帖中的代码应该可以正常工作。
答案 1 :(得分:28)
我遇到了类似的问题,并希望在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
});
答案 2 :(得分:4)
我认为这种方式更容易。 Justo你有两个目的地,但在minify插件之前,你把一个路径放到普通文件中,然后你把minify插件放在你希望有一个minify文件的路径上。
例如:
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
});
答案 3 :(得分:3)
对于向多个目的地广播更新的情况,在一系列目的地上循环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;
});
答案 4 :(得分:0)
我和Gulp有很多相同的问题,因为管理到多个目的地的各种任务似乎很难或可能不可能。此外,为一个任务设置多个流似乎效率低下,但我想这是现在的解决方案。
对于我当前的项目,我需要多个捆绑包与各种页面相关联。修改Gulp Starter
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);
})
});
});