Joel's Thoughts

Synchronous Gulp Tasks


I’m trying to rewrite a Gulp build lately where I need to rename all the files by using using gulp-rev and copy them to the “dist” folder. Also the rest of the files will be copied to the same “dist” directory maintaining directory structure.

Original Build Script


    var stylesDest = './minified/assets/styles';
    var scriptsDest = './minified/assets/scripts';
    var minifyCss = require('gulp-minify-css');
    var sass = require('gulp-sass');
    var rename = require('gulp-rename');    
    var browserify = require('gulp-browserify');
    var uglify = require('gulp-uglify');

    ...more code

    gulp.task('styles', function () {
        gulp.src('./assets/styles/main.scss')
            .pipe(sass({errLogToConsole: true}))           
            .pipe(minifyCss())
            .pipe(rename('compact.min.css'))
            .pipe(gulp.dest(stylesDest));
    });

    gulp.task('scripts', function () {
        gulp.src('./assets/js/main.js')
            .pipe(browserify({debug: true}))           
            .pipe(uglify())
            .pipe(rename('compact.min.js'))
            .pipe(gulp.dest(scriptsDest));
    });


    gulp.task('build', [        
        'styles',        
        'scripts'
    ]);


    ...more code

Adding The Gulp-Rev Task And Copying The Rest Of The Files


    ...more code

    gulp.task('styles', function () {
        gulp.src('./assets/styles/main.scss')
            .pipe(sass({errLogToConsole: true}))           
            .pipe(minifyCss())
            .pipe(rename('compact.min.css'))
            .pipe(gulp.dest(stylesDest));
    });

    gulp.task('scripts', function () {
        gulp.src('./assets/js/main.js')
            .pipe(browserify({debug: true}))           
            .pipe(uglify())
            .pipe(rename('compact.min.js'))
            .pipe(gulp.dest(scriptsDest));
    });

    // My added tasks here for clarity sake

    var buildDest = './dist';
    var base = './assets';
    var rev = require('gulp-rev');

    gulp.task('versionfile', ['styles', 'scripts'], function () {
        gulp.src([stylesDest + '/*.css', scriptsDest + '/*.js'], { base: base })
            .pipe(rev())
            .pipe(gulp.dest(buildDest))  // write rev'd assets to build dir
            .pipe(rev.manifest())
            .pipe(gulp.dest(buildDest))  // write manifest to build dir
    });

    gulp.task('copy', ['versionfile'], function () {
       gulp.src([base + '/**/*']).pipe(gulp.dest(buildDest));
    });



    gulp.task('build', [        
        'styles',        
        'scripts',
        'versionfile',
        'copy'
    ]);

    ..more code

Once again, my intention here is to call “versionfile” task once “styles” and “scripts” are finished. Finally call task “copy” once “versionfile” is done. If you noticed I added the second parameters in array ['styles', 'scripts']. However; this didn’t perform based on what I want. I noticed the firing order of the task is still asynchronous.

With more research, found out the solution! Here comes the magic sauce.

The Fix


    ...more code

    gulp.task('styles', function () {
       return gulp.src('./assets/styles/main.scss')
            .pipe(sass({errLogToConsole: true}))           
            .pipe(minifyCss())
            .pipe(rename('compact.min.css'))
            .pipe(gulp.dest(stylesDest));
    });

    gulp.task('scripts', function () {
       return gulp.src('./assets/js/main.js')
            .pipe(browserify({debug: true}))           
            .pipe(uglify())
            .pipe(rename('compact.min.js'))
            .pipe(gulp.dest(scriptsDest));
    });

    // My added tasks here for clarity sake

    var buildDest = './dist';
    var base = './assets';
    var rev = require('gulp-rev');

    gulp.task('versionfile', ['styles', 'scripts'], function () {
        return gulp.src([stylesDest + '/*.css', scriptsDest + '/*.js'], { base: base })
            .pipe(rev())
            .pipe(gulp.dest(buildDest))  // write rev'd assets to build dir
            .pipe(rev.manifest())
            .pipe(gulp.dest(buildDest))  // write manifest to build dir
    });

    ...more code

Yep, you’re right. The magic sauce is to add a return declaration to all tasks that I want to observe if it’s finished executing.