Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp.js run tasks in specific order blocking

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\'.'));
});
like image 857
Justin Avatar asked Jul 09 '14 18:07

Justin


People also ask

Which helps with sequencing the tasks one by one in gulp?

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.

What is Gulpfile?

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.

How do I run a gulp task?

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.

How do you define a task in gulp?

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 .


2 Answers

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.

like image 160
Konstantin Tarkus Avatar answered Sep 27 '22 22:09

Konstantin Tarkus


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.

like image 45
Mercury Avatar answered Sep 27 '22 22:09

Mercury