Gulp.js run tasks in specific order blocking
gulp, javascript
Solution
An example of setting up dependencies in Gulp 3.0. In this example 3 tasks depend on the 'clean' task which should be executed first:
// Include Gulp
var gulp = require('gulp');
var task = {};
// Clean up
gulp.task('clean', function () { .. });
// HTML pages
gulp.task('pages', task.pages = function () { ... });
gulp.task('pages:clean', ['clean'], task.pages);
// CSS style sheets
gulp.task('styles', task.styles = function () { ... });
gulp.task('styles:clean', ['clean'], task.styles);
// JavaScript files
gulp.task('scripts', task.scripts = function () { ... });
gulp.task('scripts:clean', ['clean'], task.scripts);
// Bundling and optimization
gulp.task('build', ['pages:clean', 'styles:clean', 'scripts:clean']);
With run-sequence it would be equal to:
// Include Gulp & utilities
var gulp = require('gulp');
var runSequence = require('run-sequence');
// Clean up
gulp.task('clean', function () { .. });
// HTML pages
gulp.task('pages', function () { ... });
// CSS style sheets
gulp.task('styles', function () { ... });
// JavaScript files
gulp.task('scripts', function () { ... });
// Bundling and optimization
gulp.task('build', ['clean'], function (cb) {
runSequence(['pages', 'styles', 'scripts'], cb);
});
P.S.: In the upcoming Gulp 4.0 the dependency system will be much better.
Problem
Using gulp.js I have three tasks (uglify, buildHTML, rmRevManifest) I'd like to run as part of a parent build task. The code I have works, excepts it runs the tasks in parallel (i.e. order is not preserved). How can I have the tasks block and not run the next until the previous finishes? I.E. right now the execution order comes back as: ``` [11:50:17] gulp-notify: [Gulp notification] Deleted 'rev-manifest.json'. [11:50:17] gulp-notify: [Gulp notification] Created 'build/index.html'. [11:50:17] gulp-notify: [Gulp notification] Uglified JavaScript. ``` The order matters, and uglify should run first, then buildHTML, and finally rmRevManifest. ``` gulp.task('build', ['uglify', 'buildHTML', 'rmRevManifest'], function(cb) { }); gulp.task('uglify', function(cb) { gulp.src('client/js/source/**/*.js') .pipe(concat('app')) .pipe(ngmin()) .pipe(uglify()) .pipe(rev()) .pipe(rename({ extname: ".min.js" })) .pipe(gulp.dest('client/js')) .pipe(rev.manifest()) .pipe(gulp.dest('client/js')) .pipe(notify('Uglified JavaScript.')); }); gulp.task('buildHTML', function(cb) { gulp.src('client/views/index.html') .pipe(replace(/app\-[a-fA-F0-9]\.min\.js/, 'app-.min.js')) .pipe(gulp.dest('client/build')) .pipe(notify('Created \'build/index.html\'.')); }); gulp.task('rmRevManifest', function(cb) { gulp.src('client/js/rev-manifest.json', { read: false }) .pipe(rimraf()) .pipe(notify('Deleted \'rev-manifest.json\'.')); }); ```