Sync Gulp Tasks with run-sequence

By  on  

gulp.js is an awesome utility for so many things.  I've recently started using gulp as a build tool for the next blog redesign, whenever that may come.  In the past I had written my own build scripts but they quickly got messy and I ran into problems with concurrent tasks and knowing when each was complete.  gulp.js has made my build code prettier but I still get caught with timing issues due to async tasks.

Of course the nature of JS is becoming async but sometimes I just want a "top down" build process -- that's where run-sequence comes in.  With run-sequence I can easily group tasks to ensure they are done before setting off other tasks!

run-sequence works by passing arguments in the form of arrays or strings; an array signifies the tasks can be run concurrently, a string signifies a single task:

var runSequence = require('run-sequence');

gulp.task('some-task', function() {
	runSequence(
		['task-1', 'task-2', 'task-3'], // These 3 can be done in parallel
		'task-4', // ...then just do this
		['task-5', 'task-5'], // ...then do these things in parallel
		'task-6', // ...then do this
		// ....
	);
});

Each successive argument waits for the previous task(s) to finish.  My future theme's working gulp build file default task looks as follows:

// Create the default run action, which should be the entire build
gulp.task('default', function() {
	runSequence(
		['copy-js-dir', 'copy-php-files', 'copy-image-files', 'compile-stylus'],
		'clone-prism',
		['minify-css', 'minify-js'],
		'replace-build-ids',
		'create-backup-zip',
		'move-to-wordpress'
	);
});

JavaScript purists will hate on me for not creating my own promises to avoid the need for sync and run-sequence, but to be honest, I don't care.  Adding my own promises would make the code messier and with little speed benefit.

Sometimes we have to make concessions for the sake of maintainability -- all developers know that.  run-sequence was a concession I've made to keep my code maintainable and logical in my own head.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Discussion

  1. Pablo Perez

    Thanks for all your articles David!

  2. I recently came across Gulp and encountered the same issues… and found the same solution, before Gulp 4 is released !

    with run-sequence, I can even load/queue my tasks as modules and share them across different projects.

  3. Juha

    I’d add callback in tasks, at least for the sake of example – otherwise tasks depending on it would not wait until it is completed, right?

    gulp.task('some-task', function(done) {
      runSequence('task-1', ['task-2', 'task-3'], done);
    }
    
  4. Damn, that’s awesome! I remember seeing this module a while back and not thinking much of it, but the feature you demonstrate where you can define subtasks to run in parallel is very impressive.

    Took two minutes to setup, works like a charm. Thanks for sharing :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!