Как сохранить поток в нескольких местах назначения с помощью 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

В настоящее время вам необходимо использовать два потока для каждого dest при использовании file.contents в качестве потока. Вероятно, это будет исправлено в будущем.

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: эта ошибка теперь исправлена ​​в глотках. Код в исходном сообщении должен работать нормально.

Answer 2

У меня была такая же проблема с Gulp, поскольку различные задачи, связанные с несколькими пунктами назначения, кажутся трудными или потенциально невозможными. Кроме того, настройка нескольких потоков для одной задачи кажется неэффективной, но я думаю, что это решение на данный момент.

Для моего текущего проекта мне понадобилось несколько связок для связи с различными страницами. Модификация GULP Starter

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

browserify/watchify задача:

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

Я использовал цикл по каждому элементу внутри модуля Глоб обратного вызова:

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.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

Я думаю, что этот способ проще. У Justo у вас есть два адресата, но перед мини-плагином вы помещаете один путь в обычный файл, а вы добавляете плагин 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 

}); 

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