Search code examples
gulpgulp-watch

How to run gulp.watch multiple tasks synchronized?

For example, the code below will run the tasks asynchronized, but i want them to run one after another. So "concat" should be finished first, then run "autoprefix", then run "minify".

gulp.task("watch", function ()
{
	gulp.watch("*.css", ["concat", "autoprefix", "minify"]);
});

Here in this example, i want to concatenate my css files, then autoprefix properties and then minify the concatenated file.

But this will run all the tasks on same time.

That means my minified file (which is the file i want to use in my html) is not up to date, because the file got minified before the "autoprefix" task was finished.

So how do i make them run synchronized, one after another?

Solution

  • Gulp 4.0 (3.9.1 as of right now) has the ability to run tasks in sequence/series.

    https://github.com/gulpjs/gulp/blob/4.0/docs/API.md#gulpseriestasks

    For now, you could use the run-sequence package.

    https://www.npmjs.com/package/run-sequence