Gulp tasks not running synchronously

Question

I am trying to install packages through bower, and once the installation is finished, I want the files to be moved from dist folder to its parent, and then delete the dist folder. But somehow, its not working properly.

var gulp = require('gulp'),
    bower = require('gulp-bower'),
    del = require('del'),
    fs = require('fs'),
    path = require('path'),
    merge = require('merge-stream');
    vinylPaths = require('vinyl-paths');
    runSequence = require('run-sequence');

var appPath="./www";
var folders = getFolders(appPath);

/* Function to get folders present in www */
function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('clean', function (){
    var tasks = folders.map(function(folder) {
       return gulp.src(path.join(appPath, folder))
            .pipe(vinylPaths(del))
    });
});

/* Gulp task to run bower install */
gulp.task('bower', ['clean'], function() {
    return bower({cmd: "install"});

});

/* Gulp task to copy files from dist folder to their parent folders */
gulp.task('moveFiles', ['bower'], function (){
    var tasks = folders.map(function(folder) {
        console.log("FOLDER", folder);
        return gulp.src(path.join(appPath, folder, '/dist/**/*'))
            .pipe(gulp.dest(path.join(appPath, folder )));

    });
    return tasks;
});

/* Gulp task to clean the dist folder after files have been copied  */
gulp.task('delete-dist-folder', ['moveFiles'], function () {
    var tasks = folders.map(function(folder) {
           return gulp.src(path.join(appPath, folder, '/dist'))
                .pipe(vinylPaths(del))
    });
    return tasks;
});

gulp.task('default', ['delete-dist-folder']);

This is what I wrote till now. After bower, the rest two tasks don't run. But if I run them individually, they work perfectly fine.

I am unable to figure out what is going wrong here. Any help would be greatly appreciated.

Answer 1

The problem is that you return arrays of event streams. Look at your delete-dist-folder task. You return tasks and tasks is created from calling .map on an array. So tasks is an array (of event streams).

Gulp does not know what to do with your arrays and assumes that your tasks are synchronous. There are only 3 ways to mark a task as asynchronous: 1) return an even stream; Gulp will wait for the stream to end, 2) return a promise; Gulp will wait for the promise to be resolved or rejected, or 3) declare your task callback to take a single parameter which you'll call when your task is done; Gulp will wait for the callback to be called. An array of event streams does not correspond to any of these options.

The Gulp wiki suggest using merge-stream to return more than one stream from a task. Judging by the code of merge-stream , and supposing you imported merge-stream as merge , you could do return merge.apply(undefined, tasks) .

Side node: in your clean task you forgot to return a value.

Answer 2

I had a similar issue a while back when nesting task(requiring one task in another). So to solve this issue and run task in sequence I used run-sequence .

You seem to have installed run-sequence . Use it this way:

runSequence = require('run-sequence');

    gulp.task('default', function(callback) {
      runSequence('clean', 'bower', 'moveFiles', 'delete-dist-folder',
                 callback);
    });

Hope this might help you. You can refer this for any help. This is a temporary solution untill gulp 4.0 , which will include option to configure your task run in parallel or sequentially.