Gulp: Async task with multiple gulp.src

[6aKa]

Example, with useing callback

gulp.task('test', function(cb) {

  gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'))
    .on('end', function() {cb()});

  gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'))
    .on('end', function() {cb()});

});

Please add method for event 'end'. Like this

gulp.task('test', function(cb) {

  gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'))
    .end(cb());

  gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'))
    .end(cb());

});

And for 'error' and 'data' events.

[dashed]

@6aKa You're suggesting wrappers for .on(...) which is part of the node.js events api (see: http://nodejs.org/api/events.html).

This is out of scope of gulp.

[floatdrop]

You got a problem - cb is called twice from src. I suggest this is more accurate way to do this:

gult.task('cookie', function(cb) {
    gulp.src('jquery.cookie/jquery.cookie.js')
        .pipe(gulp.dest('public/jquery'));
});

gult.task('bootstrap', function(cb) {
    gulp.src('bootstrap/js/*.js')
        .pipe(gulp.dest('public/bootstrap'));
});

gulp.task('test', function() {
    gulp.run('cookie', 'bootstrap');
});

But if you want shorter version of on('end', function ... ) you can write like this:

gulp.task('test', function(cb) {

  gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'))
    .on('end', cb);

  gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'))
    .on('end', cb);
});

[6aKa]

@Dashed I suggest aliases. For example I use many variables, and path.join for src and dest. Gulpfile look likes from hell. And because, I want many short constructions, aliases :)

@floatdrop Split for individual task more accurate, but ugly if you copy many dependencies to work directory. I want true async tasks, with multiple gulp.src inside, without callback hell

[robrich]

Should gulp warn you or error if you call cb more than once? Currently it just suppresses the condition, ignoring all but the first call. See https://github.com/robrich/orchestrator/issues/10

[floatdrop]

@6aKa maybe with event-stream.concat this will look nicer:

var es = require('event-stream');

gulp.task('test', function(cb) {
    es.concat(
        gulp.src('bootstrap/js/*.js')
            .pipe(gulp.dest('public/bootstrap')),
        gulp.src('jquery.cookie/jquery.cookie.js')
            .pipe(gulp.dest('public/jquery'))
    ).on('end', cb);
});

[dashed]

There should be a wiki page to hold all the neat usage patterns of gulp. Some of the interesting ones usually get buried in github issues.

[6aKa]

@robrich for errors I have event 'error' and can catch with .on('error', cb). I like ideas for callbacks from https://github.com/caolan/async.
Useing async.series or async.parallelI can collect results in callback from all streams
Useing async.waterfall I get truly asynchronous streams with arguments
Something like this

gulp.task('test', function(cb) {
async.series([
  gulp.src('bootstrap/js/*.js')
    .pipe(gulp.dest('public/bootstrap'))
    .on('error', callback(err, 'one'))
    .on('end', callback(null, 'one'));
  gulp.src('jquery.cookie/jquery.cookie.js')
    .pipe(gulp.dest('public/jquery'))
    .on('error', callback(err, 'two'))
    .on('end', callback(null, 'two'););
], function (err, result) {
});
});

@floatdrop concat with event-stream look very good. I think this trick should be added to wiki :)

[floatdrop]

Added recepies in wiki. Is this closing this task @6aKa ?

[contra]

@floatdrop perfect - just what that section was for

[contra]

You can actually just return the es.concat stream btw - no need to listen for end or error events since the task system already does that if you return a stream from a task

[floatdrop]

Thanks @Contra ! It also make mocha gist shorter!

[treeskar]

You can use merge-stream

var concat = require('gulp-concat'),
    merge = require('merge-stream');

merge(
        gulp.src('./src/app/**/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./tmp/js')),
        gulp.src('./tmp/tpl/templates.js')
    )
        .pipe(concat('all.js'))
        .pipe(gulp.dest('../public/js'));

[PanYuntao]

I do it like this:

gulp.task('publish', function(cb) {
    async.series([
        function (callback) {
            gulp.src('css/*.css')
                .pipe(minifyCss())
                .pipe(rev())
                .pipe(gulp.dest('public/css'))
                .pipe( rev.manifest() )
                .pipe( gulp.dest( 'rev/css' ) )
                .on('end', callback);
        },
        function (callback) {
            gulp.src('js/*.js')
                .pipe(jshint())
                .pipe(uglify())
                .pipe(rev())
                .pipe(gulp.dest('public/js'))
                .pipe( rev.manifest() )
                .pipe( gulp.dest( 'rev/js' ) )
                .on('end', callback);
        }
        ,
        function (callback) {
            gulp.src('images/*')
                .pipe(imagemin({
                    progressive: true,
                    svgoPlugins: [{removeViewBox: false}],
                    use: [pngquant()]
                }))
                .pipe(gulp.dest('public/img'))
                .on('end', callback);
        }
        ],
        function (err, values) {
            if (err) {
                cb('your error');
            }
            else
            {
                console.log('success');
                cb();
                //process.exit();
            }
        });
});

gulp.task('default', ['publish']);

[yairEO]

@PanYuntao - what is async.series ? where does async comes from?

seems like you are using a 3rd party script for this magic.

[yairEO]

I (used to) do it like this:

gulp.task('myTask', ()=>{
    var p1, p2;

    p1 = new Promise((resolve, reject)=>{
        gulp.src('./**/*.html')
            .pipe(...)
            .pipe(...)
            .on('end', resolve);
    });

    p2 = new Promise((resolve, reject)=>{
        gulp.src('./**/*.js')
            .pipe(...)
            .pipe(...)
            .on('end', resolve);
    });

    return Promise.all([p1, p2]);
});

[stevelacy]

Do not restart an issue thread from 4 years ago.

[yairEO]

it's better, IMHO, that the information regarding this question will be here than scattered around the internet, so others will easily access it and gain insights.

[robrich]

const async = require('async');

[yairEO]

@robrich - This async which you require, is it a 3rd-party script?

why would I want to load such enormous package for something so simple like I showed in my code comment above?

[robrich]

@yairEO: We're likely going to get this thread locked, but in short because the async package existed before promises were popular. Now-a-days it's likely better to use the await keyword in JavaScript and declare the function with the JavaScript async keyword. In fact one might argue that you could use this async / await strategy, a single function that awaits everything, require either vinyl-fs or glob and accomplish pretty much everything gulp did. Others argue this technique is reinventing the wheel. If you'd like, tag me on a new issue or hit me up on twitter or email and let's continue the discussion.

[phated]

@robrich you're right, it's getting locked because you are so misinformed about where gulp is now. We even have tight integration with async/await