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();
});

Answer 1

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));
});

Answer 2

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 (...
});

Answer 3

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);
});