1.13. Managing the task execution order

Gulp allows us to declare that a task has a dependency on another class and there are multiple ways to indicate that a task has been completed. Let’s learn about it.

How to do it…

  1. We can indicate that a task has been completed by returning a string:
     gulp.task("task_name", function () {
        
       // configuration
       const input  = "...";
       const output = "...";
        
       // logic
       return gulp.src(input)
                  .pipe(/*...*/)
                  .pipe(gulp.dest(output));
     });
    
  2. Passing and invoking a call-back to the task:
     gulp.task("task_name", function (done) {
        
       // configuration
       const input  = "...";
       const output = "...";
        
       // logic
       gulp.src(input)
            .pipe(/*...*/)
            .pipe(gulp.dest(output));
        
          done();
     });
    
  3. Or returning a promise:
     gulp.task("task_name", function (done) {
        
       // configuration
       const input  = "...";
       const output = "...";
        
       // logic
       return new Promise(function(resolve, reject) {
                    // do something
                   resolve();
       });
     });
    

How it works…

Gulp is able to identify whether a task has been completed or not by observing the return of the tasks (stream or promise) or its arguments (callback). If a task never finishes executing Gulp will throw an exception.

There’s more…

Once you have declared when each individual task will be completed you can declare the task’s execution order by passing an extra argument to the gulp.task function:

gulp.task("task_1", function (done) {
           console.log(("1");
     done();
});

gulp.task("task_2", function (done) {
           console.log(("2");
     done();
});

gulp.task("task_3", ["task_1", "task_2"], function (done) {
           console.log(("1");
     done();
});

As we can see the third task requires the first and second tasks to be executed before the third task can be executed. The tasks are declared inside the array, which is passed to the gulp.task function are executed in parallel.

Sometimes declaring the tasks execution order within a task declaration can make our gulpfile.js hard to read and predict, for that reason it is much better to declare all tasks as independent use the gulp-sequence plugin to control the task’s execution order:

gulp.task("default", function (cb) {
  runSequence(
    [" task_1", " task_2"],
    " task_3",
    cb);
});

You can pass as many tasks as you may need to the runSequence method. The tasks will be executed in the order that you passed them. If you passed an array of tasks at some point, the tasks contained in the array will be executed in parallel. When all tasks executed in parallel have been completed, Gulp will execute the following task.

See also

Please refer to the gulp-sequence documentation at https://www.npmjs.com/package/gulp-sequence to learn more about its configuration options.


Shiv Kushwaha

Author/Programmer