Sequencing tasks with gulp

Question

I'm a bit stumped with gulp. Based on the docs, in order to get sequential execution, I should be returning the stream from my tasks, so i tried to do the below for my gulpfile. But as best I can tell, there's a race condition. Half the time I get ENOENT, lstat errors, the other half it succeeds, but my deployDir has weird folder names and missing files all over.. Am I missing something? Is there a trick to this?

var gulp = require('gulp'),
    filter = require('gulp-filter'),
    mainBowerFiles = require('main-bower-files'),
    del = require('del'),
    inject = require("gulp-inject"),
    uglify = require('gulp-uglifyjs');

var config = {
    bowerDir: 'src/main/html/bower_components',
    cssDir: 'src/main/html/css/lib',
    fontsDir: 'src/main/html/fonts/lib',
    imgDir: 'src/main/html/img/lib',
    jsDir: 'src/main/html/js/lib',
    deployDir: 'src/main/resources/html'
};

gulp.task('default', ['clean', 'bowerdeps', 'dev']);

gulp.task('clean', function() {
    return del([
        config.cssDir,
        config.fontsDir,
        config.jsDir,
        config.deployDir
    ]);
});

gulp.task('dev', function() {
    return gulp
        .src(['src/main/html/**', '!src/main/html/{bower_components,bower_components/**}'])
        .pipe(gulp.dest(config.deployDir));
});

gulp.task('bowerdeps', function() {
    var mainFiles = mainBowerFiles();

    if(!mainFiles.length) return; // No files found

    var jsFilter = filterByRegex('.js$');
    var cssFilter = filterByRegex('.css$');
    var fontFilter = filterByRegex('.eot$|.svg$|.ttf$|.woff$');

    return gulp
        .src(mainFiles)
        .pipe(jsFilter)
        .pipe(gulp.dest(config.jsDir))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(gulp.dest(config.cssDir))
        .pipe(cssFilter.restore())
        .pipe(fontFilter)
        .pipe(gulp.dest(config.fontsDir));
});

// Utility Functions
var filterByRegex = function(regex){
    return filter(function(file){
        return file.path.match(new RegExp(regex));
    });
};

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) — Louis, Mar 31 '17 at 13:32

score 1 · Accepted Answer · answered Jan 26 '15 at 09:44

Dependencies run always parallel: ['clean', 'bowerdeps', 'dev'].

https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

You can use run-sequence for sequencing tasks.

Other thing: del doesn't return a stream. Use callback instead:

gulp.task('clean', function(cb) {
    del([
        config.cssDir,
        config.fontsDir,
        config.jsDir,
        config.deployDir
    ], cb);
});

Sequencing tasks with gulp

1 Answers1

Linked