1

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?

Assassinbeast
  • 1,207
  • 1
  • 17
  • 33
  • Possible duplicate of [How to run Gulp tasks sequentially one after the other](http://stackoverflow.com/questions/22824546/how-to-run-gulp-tasks-sequentially-one-after-the-other) – Sven Schoenung Dec 11 '16 at 08:29

3 Answers3

3

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

codyeatworld
  • 1,263
  • 7
  • 9
0

Just install npm install gulp-sequence --save-save.

const gulpSequence = require('gulp-sequence');

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

Command gulp watch

Note: You must have to include other such gulp.

halfer
  • 19,824
  • 17
  • 99
  • 186
Md. A. Barik
  • 429
  • 5
  • 12
0

Since the release of Gulp 4 this is natively supported without any dependencies. I saw a link to docs but not the very simple syntax:

gulp.task("watch", function ()
{
    gulp.watch("*.css", gulp.series( concat, autoprefix, minify ) );
});
Ben Toth
  • 1
  • 1
  • 1