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\'.'));
});
Runs a sequence of gulp tasks in the specified order. This function is designed to solve the situation where you have defined run-order, but choose not to or cannot use dependencies.
A gulpfile is a file in your project directory titled gulpfile. js (or capitalized as Gulpfile. js , like Makefile), that automatically loads when you run the gulp command.
in the Before launch area and choose Run Gulp task from the list. In the Gulp task dialog that opens, specify the Gulpfile. js where the required task is defined, select the task to execute, and specify the arguments to pass to the Gulp tool. Specify the location of the Node.
gulp. task('task-name', function() { // Stuff here }); task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name .
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.
The real answer: you need to set up dependencies which require the other tasks to run first.
The easy answer: there's an npm module to do exactly what you need called run sequence.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With