Sequential execution of tasks in Gulp JS

Gulp JS is a project collector and task manager for front-end and web development, which is a worthy alternative for the popular Grunt JS . One of the few things that Gulp differs from Grunt is that by default all tasks run asynchronously. In general, it can be said that all tasks are performed simultaneously.

Recently, studying Gulp, I was faced with the need to synchronously run several tasks ... synchronous. The documentation for Gulp mentions this problem, but I had to tinker a bit before I figured it out.

So, we have 3 ways to make the execution of tasks synchronous, but for this to work, we need to explicitly specify the dependencies of the tasks. About dependencies a little later, for a start we will analyze these 3 ways:

1. Using callback, callback

gulp.task('sync', function (cb) { // setTimeout     setTimeout(function () { cb(); }, 1000); }); 

')
2. Through the return flow

 gulp.task('sync', function () { return gulp.src('js/*.js') .pipe(concat('script.min.js') .pipe(uglify()) .pipe(gulp.dest('../dist/js'); }); 

3. Take advantage of the Promise

 gulp.task('sync', function () { var deferred = Q.defer(); // setTimeout     setTimeout(function () { deferred.resolve(); }, 1000); return deferred.promise; }); 

Now suppose that we have another secondTask task, which depends on the results of the sync task (which we created in one of the ways described above). Therefore, we declare our sync task as a dependency for the secondTask task:

 gulp.task('secondTask', ['sync'], function () { //       //  'sync'   ! }); 

The main mistake that I made was on the assumption that if I declare a task list as a dependency, then the tasks will be executed in the specified sequence, when the next task in the list is executed, it will be executed only after the end of the previous task. But this is not at all the case:

 gulp.task('thirdTask', function () { //       }); //  ,      //  'sync',    //  'thridTask'     //   'default'.    . //    'default',  // 'sync'  'thridTask   //  gulp.task('default', ['sync', 'thirdTask'], function () { // -  }); 

In order for the default task to be executed in the order I wanted, the thirdTask task thirdTask be made dependent on the sync task.

 gulp.task('thirdTask', ['sync'] function () { //      'sync'.   //   ,   'default'   // ,  'thirdTask'    }); gulp.task('default', ['sync', 'thirdTask'], function () { // -  }); 

Note that every time you run a thirdTask , sync will also be run. This may be an undesirable behavior if you have some watch task that runs the thirdTask task.

I hope that this article will help someone to understand how with Gulp to implement the implementation of their tasks in a strictly defined order. But it is worth noting that it is asynchronous start and asynchronous execution of tasks that make Gulp so fast and powerful, so use the ability to perform synchronous execution only where it is really necessary.