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.