how to run gulp tasks in order?

Question

I am trying to concat all the css files into one released css file by running task:

gulp.task('task one', () => {  
    gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));
});

After that, because the font path in the output css file is not correct, so I need to modify the path.

gulp.task('task two', () => {
    var urlAdjuster = require('gulp-css-url-adjuster');

    //change font path for released css files
    gulp.src([releasePath + "/*.css"])
        .pipe(urlAdjuster({
            replace: ['../../fonts', '../fonts'],
        }))
        .pipe(gulp.dest(releasePath + "/"));
);

In order to make it happen, I need to run these two tasks separately one by one. How can I run these two tasks in order and put them into one task.

I have tried: series = require('gulp-series'); ----not working

gulp.task('task two', ['task one'], function () {
    // Gulp. src (...
});

-----not working

---update-------------------------------------------------------- I used return but it is now working. The actual codes are:

function procHTMLForRelease(stream, file) {
    gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));

}

function processRelease() {


    // Grab all html files in the folder.
    // Loop over them, process them, then spit em out.
    gulp.src([paths.Source + "/*.html"])
        .pipe(foreach(procHTMLForRelease))
        .pipe(gulp.dest(paths.Release));

    // Process image files
    gulp.src([paths.Source + "images/*.*"])
        .pipe(gulp.dest(paths.Release + "images/"));

    // Copy font files
    gulp.src([paths.html + "fonts/*.*", paths.html + "fonts/*/*.*"])
        .pipe(gulp.dest(paths.release + "/fonts/"));


}  



gulp.task('task one', () => { return processRelease();
});

Your original codes are totally different from the updated ones, How come? — lofihelsinki, Nov 07 '17 at 13:17

score 0 · Answer 1 · answered Nov 03 '17 at 13:08

0

gulp.task('task two', ['task one'], function () {
    // gulp.src( ...
});

This is correct, it sets task one as a dependancy for task two. However, for this to work, task one needs to return.

gulp.task('task one', () => {  
    return gulp.src([Dir + "**/*.css"])
        .pipe(concat(outFilename + ".css"))
        .pipe(gulp.dest(destDir));
});

answered Nov 03 '17 at 13:08

lofihelsinki

2,491
2
23
35

@ lofihelsinki I have used "return", but its not really working, see my updates – Kevin Nov 05 '17 at 23:11
You have to put each `gulp.src` into it's own task and return the `gulp.src`, as in my answer. Your original example should work if you just add `return` in front of `gulp.src`. Your update example doesn't have anything as a dependacy, so it would not work. – lofihelsinki Nov 06 '17 at 07:47

score 0 · Answer 2 · answered Nov 13 '17 at 08:13

You could modify your updated code like this to make it return.

gulp.task('taks one', function () {

    // Grab all html files in the folder.
    // Loop over them, process them, then spit em out.
    var one = gulp.src([paths.Source + "/*.html"])
        .pipe(foreach(procHTMLForRelease))
        .pipe(gulp.dest(paths.Release));

    // Process image files
    var two = gulp.src([paths.Source + "images/*.*"])
        .pipe(gulp.dest(paths.Release + "images/"));

    // Copy font files
    var three = gulp.src([paths.html + "fonts/*.*", paths.html + "fonts/*/*.*"])
        .pipe(gulp.dest(paths.release + "/fonts/"));

   // Return
   return [ one, two, three];

});

The tasks inside the function will run asynchronously, but you can make another function to depend on those all being done.

gulp.task('task two', ['task one'], function () {
    // Gulp. src (...
});

score -1 · Answer 3 · answered Nov 14 '17 at 06:40

For anyone has the same problem and looking for a solution: Here is what I do to fix it: https://www.npmjs.com/package/run-sequence

For example:

// This will run in this order:
// * build-clean
// * build-scripts and build-styles in parallel
// * build-html
// * Finally call the callback function
gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

how to run gulp tasks in order?

3 Answers3