Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp: how to compose tasks sequentially?

I would need to compose 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 () {});
like image 422
doberkofler Avatar asked Jun 22 '15 08:06

doberkofler


People also ask

What is each task in Gulp?

Each gulp task is an asynchronous JavaScript function - a function that accepts an error-first callback or returns a stream, promise, event emitter, child process, or observable (more on that later). Due to some platform limitations, synchronous tasks aren't supported, though there is a pretty nifty alternative.

Why can't I run synchronous tasks in Gulp?

Due to some platform limitations, synchronous tasks aren't supported, though there is a pretty nifty alternative. Tasks can be considered public or private. Public tasks are exported from your gulpfile, which allows them to be run by the gulp command.

How do I register a task publicly in Gulp?

To register a task publicly, export it from your gulpfile. // The `clean` function is not exported so it can be considered a private task. // It can still be used within the `series ()` composition. // The `build` function is exported so it is public and can be run with the `gulp` command. // It can also be used within the `series ()` composition.

What is the use of gulp plugin?

Gulp is a toolkit to automate and enhance your workflow and you can use gulp and the flexibility of Javascript to automate slow, repetitive workflows and compose them into efficient build pipelines. The available plugins do some tasks efficiently and you can use these as building blocks and chain them to get the desired result.


2 Answers

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'));
});
like image 139
Danilo Valente Avatar answered Sep 21 '22 15:09

Danilo Valente


This little module may help: stream-series.

Just replace eventStream.merge(streams) with:

var series = require('stream-series');
// ...
return series(streams);
like image 33
dragn Avatar answered Sep 24 '22 15:09

dragn