I would need to pose gulp tasks by sequentially processing different sources as there are dependencies between them.

Based on the documentation this should be done my merging streams but I see no way on how to enforce to order and serialize them.

What is the proper way to model this in Gulp 3 ?

I typically use functions as containers for the individual build steps and then invoke them from the build and watch tasks:

function buildModule(module) {
    var streams = [];

    // step one
    streams.push(
        gulp.src(path.join('./modules', module, '*.js'))
        // ... series of chained calls
    );

    // step two
    streams.push(
        gulp.src([TMP, ...])
        // generate target also using some of the files from step one
        );

    return eventStream.merge(streams);
}

gulp.task('build:A', [], function () {
    return buildModule('A');
});

gulp.task('watch:buildModule', [], function () {
    gulp.watch('./modules/**/*.js', function (event) {
        if (event.type === 'changed') {
            return buildModule(path.basename(path.dirname(event.path)));
        }
    });
});

gulp.task('default', ['watch:buildModule'], function () {});

I would need to pose gulp tasks by sequentially processing different sources as there are dependencies between them.

Based on the documentation this should be done my merging streams but I see no way on how to enforce to order and serialize them.

What is the proper way to model this in Gulp 3 ?

I typically use functions as containers for the individual build steps and then invoke them from the build and watch tasks:

function buildModule(module) {
    var streams = [];

    // step one
    streams.push(
        gulp.src(path.join('./modules', module, '*.js'))
        // ... series of chained calls
    );

    // step two
    streams.push(
        gulp.src([TMP, ...])
        // generate target also using some of the files from step one
        );

    return eventStream.merge(streams);
}

gulp.task('build:A', [], function () {
    return buildModule('A');
});

gulp.task('watch:buildModule', [], function () {
    gulp.watch('./modules/**/*.js', function (event) {
        if (event.type === 'changed') {
            return buildModule(path.basename(path.dirname(event.path)));
        }
    });
});

gulp.task('default', ['watch:buildModule'], function () {});

• javascript
• node.js
• gulp

• why not use gulp-sequence – harishr Commented Jun 23, 2015 at 15:27
• @entre Generally speaking, because if only want to use tasks where they are needed and actually describe an actually entity of work to be done. – doberkofler Commented Jun 24, 2015 at 12:35
• 1 @materialdreams Couldn't you just .pipe the results of one stream to the other that depends on it? Why do you need to manually manage the synchronization? – user1726343 Commented Jun 29, 2015 at 16:42
• @Asad For reasons of simplicity I've used the ment "// ...generates TMP" as a placeholder for a series of chained calls that generate a temporary set of files in a first step. The second step then uses some of the files generated in the first step and some others files as source and uses a pletely different series of chained calls to generate the final target files. – doberkofler Commented Jun 29, 2015 at 17:46
• @materialdreams Ok, so you have a stream of files that you've piped through some preprocessing. Let's call this var stage1_1 = gulp.src(...).pipe(foo()).pipe(bar()).... You want to use the files from stage1_1 stream, as well as the files from some other, parallel work, and pipe them all through some more steps. You can do var stage1_2 = gulp.src("./myauxilaryfiles/*.*").pipe(some()).pipe(more()).pipe(processing()). And then finally var final = merge(stage1_1, stage1_2).pipe(my()).pipe(final()).pipe(processing());. merge here is var merge = require('merge-stream');. – user1726343 Commented Jun 29, 2015 at 17:53

2 Answers 2

There are basically three ways to do that.

1. Defining dependent tasks

Gulp allows developers to define dependent tasks by passing an array of task names as second arguments:

gulp.task('concat', function () {
    // ...
});

gulp.task('uglify', ['concat'], function () {
    // ...
});

gulp.task('test', ['uglify'], function () {
    // ...
});

// Whenever you pass an array of tasks each of them will run in parallel.
// In this case, however, they will run sequentially because they depend on each other
gulp.task('build', ['concat', 'uglify', 'test']);

2. Using run-sequence

You can also use run-sequence to run an array of tasks sequentially:

var runSequence = require('run-sequence');

gulp.task('build', function (cb) {
    runSequence('concat', 'uglify', 'test', cb);
});

3. Using lazypipe

Although Lazypipe is a library to create reusable pipelines, you can somehow use it to create sequential tasks. For example:

var preBuildPipe = lazypipe().pipe(jshint);
var buildPipe = lazypipe().pipe(concat).pipe(uglify);
var postBuildPipe = lazypipe().pipe(karma);

gulp.task('default', function () {
    return gulp.src('**/*.js')
        .pipe(preBuildPipe)
        .pipe(buildPipe)
        .pipe(postBuildPipe)
        .pipe(gulp.dest('dist'));
});

This little module may help: stream-series.

Just replace eventStream.merge(streams) with:

var series = require('stream-series');
// ...
return series(streams);