How to save a stream into multiple destinations with Gulp.js?

Question

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

Piping to multiple destinations when file.contents is a stream is not currently supported. What is a workaround for this problem?

Solution 1

Currently you have to use two streams for each dest when using file.contents as a stream. This will probably be fixed in the future.

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: This bug is now fixed in gulp. The code in your original post should work fine.

Solution 2

I was facing similar issue and wanted the gulp source to be copied to multiple locations after lint, uglify and minify tasks. I ended up resolving this as below,

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

Solution 3

For the case of broadcasting updates to multiple destinations, looping the gulp.dest command over an array of destinations works well.

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

Solution 4

I think this way is easier. Justo you have two destination, but before minify plugin you put one path to the normal file and the you put the minify plugin follow the path that you want to have a minify file.

for example:

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

});

View more solutions

Comments

[AntouanK]

Can't we save the output of the bundle(), var bundle = browserify('./src/index.js').bundle(); and then feed it to the 2 different 'pipeways'? like bundle.pipe(source('bundle.js')).pipe(gulp.dest('./dist')); and bundle.pipe(rename('bundle.min.js')).pipe(streamify(uglify()‌​) .pipe(gulp.dest('./dist')); so bundle is run once and we use the output twice.

[Alireza Mirian]

From which version of gulp this bug is fixed?

[anjunatl]

@AlirezaMirian +1 for wanting to know which version it was fixed