0

we're using gulp and run-sequence in order to build our application having the following sequence in place:

gulp.task('build', function(cb) {
    runSequence(
        'lint',
        'clean',
        'compile-templates',
        'copy-dependencies',
        'compile-styles',
        'revall',
        'cdnize',
        'overlays',
        cb
    );
});

Here is what the single tasks do and use (pasting the specific code would be quite long so I'll try to give the picture briefly describing the tasks):

  • 'compile-templates': using jade (~1.1.5) + gulp-minify-html (^0.1.3), it picks up all our jade files and compiles them to html files

  • 'copy-dependencies': using gulp-spa (0.2.2) + gulp-uglify (^0.2.1) + gulp-concat (^2.1.7) + gulp-ngmin (^0.1.2), it aggregate all our javascript files and angular templates building and minifying our vendor.js and app.js files together with the small/index.html and large/index.html files.

  • 'compile-styles': using gulp-compass (~1.1.3) + gulp-minify-css (~0.3.1), it compiles our scss files into our desktop.css and mobile.css files

  • 'revall': using gulp-rev-all (~0.3.0), takes care of revving all the prev generated files

  • 'cdnize': using gulp-cdnizer (^0.2.6), it substitutes paths for our js and css files updating them with our CDN urls inside the small/index.html and large/index.html files

  • 'overlays': using gulp-replace (^0.3.0), it will find the previously generated and revved css files and fill up their actual name inside our small/index.html and large/index.html files replacing some other placeholders as well.

here is our 'overlays' task code:

gulp.task('overlays', function() {
    var styles = fs.readdirSync('./dist/styles');
    var desktopCss = '';
    var mobileCss = '';

    for (var index in styles) {
        var style = styles[index];
        if (style.indexOf('desktop' + 'rev') > -1) {
            desktopCss = style.replace('.css', '');
        }

        if (style.indexOf('mobile' + 'rev') > -1) {
            mobileCss = style.replace('.css', '');
        }
    }

    return gulp.src('./dist/large/index.html')
        .pipe(plugins.replace('DIST_CSS', desktopCss))
        .pipe(plugins.if(!isDev, gulp.dest('./dist/large')))
        .pipe(gulp.src('./dist/small/index.html'))
        .pipe(plugins.replace('DIST_CSS', mobileCss))
        .pipe(plugins.if(!isDev, gulp.dest('./dist/small')));
});

It's a lot of stuff to do but nothing really complicated. Everything usually runs nicely BUT for some reason, some times, we're experiencing an odd problem we cannot understand:

The 2 index.html files ends up without the needed final substitution (those happening in the 'overlays' task)

It seems almost like some of the prev tasks in the run-sequence block are actually still running when the next one is run (namely 'copy-dependencies' or 'cdnize')

We triple checked all the tasks and all of them are returning the gulp pipeline as expected by run-sequence. From the gulp output it doesn't look like anything is running in parallel but we still have those placeholders instead of our values.

I guess we're missing something about gulp or the plugins we're using but we cannot really understand what and why.

Lucio
  • 41
  • 2
  • More over: we added a .pipe(wait(3000)) in order to delay the overlay task but it didn't help. – Lucio Jul 16 '14 at 08:25
  • 1
    did you manage to fix it somehow? – Sray Jan 09 '15 at 10:10
  • Check my answer here, I met same issue but fixed by a workaround. http://stackoverflow.com/questions/24619290/making-gulp-write-files-synchronously-before-moving-on-to-the-next-task/40986646#40986646 – Popeye Dec 06 '16 at 02:05

0 Answers0