run-sequence doesn't run gulp tasks in order

Question

I have 3 tasks in my Gulp file that must run in this order:

1. clean (deletes everything in the /dist folder)
2. copy (copies multiple files into the /dist folder)
3. replace (replaces some strings in some files in the /dist folder)

I've read all the other posts, I've tried "run-sequence" but it's not working as the "replace" task isn't running last. I'm confused by the use of "callback". Running the tasks individually works fine.

var gulp = require('gulp');
var runSequence = require('run-sequence');

gulp.task('runEverything', function(callback) {
    runSequence('clean',
                'copy',
                'replace',
                callback);
});

gulp.task('clean', function () {
    return del(
        'dist/**/*'
    );
});

gulp.task('copy', function() {
    gulp.src('node_modules/bootstrap/dist/**/*')
        .pipe(gulp.dest('dist/vendor'))
    //...
    return gulp.src(['index.html', '404.html', '.htaccess'])
        .pipe(gulp.dest('dist/'));
});

gulp.task('replace', function(){
    gulp.src(['dist/index.php', 'dist/info.php'])
        .pipe(replace('fakedomain.com', 'realdomain.com'))
        .pipe(gulp.dest('dist'));

    return gulp.src(['dist/config.php'])
        .pipe(replace('foo', 'bar'))
        .pipe(gulp.dest('dist'));
});

A full example using these 3 tasks would be appreciated. Thank you.

Answer 1

The run-sequence documentation has the following to say about tasks with asynchronous operations:

make sure they either return a stream or promise, or handle the callback

Both your copy and replace tasks have more than one stream. You have to return all the streams, not just the last one. Gulp won't know anything about the other streams if you don't return them and therefore won't wait for them to finish.

Since you can only ever return a single stream you have to merge the streams [insert Ghostbusters reference here]. That will give you one merged stream that you can return from your task.

Here's how to do it using the merge-stream package :

var merge = require('merge-stream');

gulp.task('copy', function() {
    var stream1 = gulp.src('node_modules/bootstrap/dist/**/*')
        .pipe(gulp.dest('dist/vendor'))
    //...
    var stream2 = gulp.src(['index.html', '404.html', '.htaccess'])
        .pipe(gulp.dest('dist/'));

    return merge(stream1, stream2);
});

gulp.task('replace', function(){
    var stream1 = gulp.src(['dist/index.php', 'dist/info.php'])
        .pipe(replace('fakedomain.com', 'realdomain.com'))
        .pipe(gulp.dest('dist'));

    var stream2 = gulp.src(['dist/config.php'])
        .pipe(replace('foo', 'bar'))
        .pipe(gulp.dest('dist'));

    return merge(stream1, stream2);
});