2014-02-22 80 views
56
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是流時管道到多個目標當前不受支持。什麼是解決這個問題的解決方法?如何使用Gulp.js將流保存到多個目的地?

回答

32

當使用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); 
}); 

編輯:這個錯誤現在已經修復了。原始帖子中的代碼應該可以正常工作。

+5

我們不能保存束(), 'VAR束= browserify(」 ./ SRC/index.js')的輸出束();' ,然後將其饋送到2不同的'管道'? 像 'bundle.pipe(源( 'bundle.js'))管(gulp.dest(」 ./ DIST '));'和'bundle.pipe(重命名(' bundle.min.js') ).pipe(streamify(醜化()) .pipe(gulp.dest( './ DIST'));' 所以束被運行一次,我們使用輸出兩次 – AntouanK

+4

從中吞的版本這個錯誤是固定的。 ? –

+0

@AlirezaMirian +1因爲想知道它被修復了哪個版本 – anjunatl

0

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

}); 
23

我正面臨類似問題並希望在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

我認爲這種方式更容易。胡斯托你有兩個目的,但縮小插件之前,你把一個路徑正常的文件和你把縮小插件遵循你想有一個縮小文件的路徑。

例如:

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 

}); 
1

用於廣播的更新到多個目的地,在目的地的陣列的循環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; 
}); 
相關問題