CODEWITHSUNDEEP
gulp
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 1011

gulp: sequential task execution

I want to compile sass by gulp, then uglify css for the production. When tried

gulp.task('build', ['sass', 'min-css'], function(){

    // ...

});

I had the following reporting in the console:

[16:44:06] Starting 'sass'...
[16:44:06] Starting 'min-css'...
[16:44:22] Finished 'sass' after 16 s
[16:44:22] Finished 'min-css' after 16 s
[16:44:22] Starting 'build'...
[16:44:22] Finished 'build' after 6.2 ms

As you see, min-css task starts before sass task ends. Although it was not any errors, this task sequence is incorrect. I need sass be complete before min-css starts.

Upvotes: 0

Views: 600

Answers (1)

Mark
Mark

Reputation: 182591

gulp docs :"Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order." So that is why your min-css task may start or finish before the sass task.

There are two main ways to fix that.

(1) Make the 'min-css' task dependent on the 'sass' task. Something like

// identifies a dependent task must be complete before this one begins

gulp.task('min-css', ['sass'], function() {
    // task 'sass' is done now
});

(2) Use a plugin designed for this problem like run-sequence

Runs a sequence of gulp tasks in the specified order. This function is designed to solve the situation where you have defined run-order, but choose not to or cannot use dependencies.

(3) You can also try gulp4.0 which has gulp.series and gulp.parallel functions to make these things easier. Gulp4 is technically in beta.

Upvotes: 2

Related Questions