Gulp watch - execute tasks in order (synchronous)

Question

I have a series of tasks to be run from a watcher but I can get them to fire in order:

Here is the gulp tasks and watcher.

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

So when I update a scss file it should compile them create a single css file. Then the build task concats the file with the vendor files. But every time I save a file its always one step behind. See the video as an example: http://screencast.com/t/065gfTrY

I have renamed the tasks, changed the order in the watch callback etc.

Am I making a obvious mistake?

Answer 1

With GULP 3 I use run-sequence package to help run tasks in sequence and not in parallel. This is how I configure my watch tasks, for example:

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

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

The above example shows a typical watch task which will hook the gulp.watch method with files which to be listened when changed, and with a callback function to run when change was detected. The runSequence function is then called (within the callback of of a certain watch) with a list of tasks to run in a synchronous manner, unlike the default way which runs tasks in parallel.