Controlling Task Order and Concurrency in Gulp 4 with series() and parallel()

Useful answer

In Gulp 4, series() runs tasks one after another, while parallel() runs independent tasks at the same time. By combining them you can define a build pipeline that cleans first, then compiles CSS and JS concurrently, and finally runs revisioning.

How it works – a worked configuration

Assume you have three task functions: clean, styles, scripts, and a revision step revAssets. Each task must return a stream, promise, child process, or call a callback; otherwise Gulp treats it as synchronous and may hang.

const { src, dest, series, parallel } = require('gulp');
const del = require('del');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');
const rev = require('gulp-rev');

function clean() {
  return del(['dist']);
}

function styles() {
  return src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('dist/css'));
}

function scripts() {
  return src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

function revAssets() {
  return src(['dist/css/**/*.css', 'dist/js/**/*.js'])
    .pipe(rev())
    .pipe(dest('dist'))
    .pipe(rev.manifest())
    .pipe(dest('dist'));
}

// Export a composite build task
exports.build = series(clean, parallel(styles, scripts), revAssets);

When you run gulp build:

1. clean finishes completely before anything else starts.
2. Once cleaning is done, styles and scripts are launched concurrently; Gulp does not wait for one to finish before starting the other.
3. Only after both parallel tasks have completed does revAssets begin.

Limits and common mistakes

Missing return or callback

If a task function does not return a stream/promise or call its callback, Gulp assumes the task finished immediately. This breaks the ordering guarantees of series() and can cause later tasks to start while earlier work is still running.

// ❌ Incorrect – no return
function styles() {
  src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(dest('dist/css'));
}

Fix by returning the stream or returning a promise.

Mixing Gulp 3.x style task definitions

In Gulp 4, gulp.task('name', fn) is ignored when you later reference the task via series() or parallel(). The task will appear as “not found” and the build will fail silently.

Either export the function directly (as shown above) or, if you must keep gulp.task, assign the result to an exported constant:

exports.styles = gulp.task('styles', function () {
  return src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(dest('dist/css'));
});

Excessive parallelism

Running many CPU‑ or I/O‑heavy tasks in parallel can saturate resources and actually slow the build, or cause race conditions when tasks write to the same files. Limit parallelism to truly independent work, and consider using gulp.watch or a concurrency‑limiting plugin if you need to run many similar tasks.

Verification steps

1. Check Gulp version: gulp -v (should be 4.0.0 or later).
2. Save the configuration above to gulpfile.js in an empty project.
3. Run gulp build and observe the terminal output: clean finishes, then you see both styles and scripts logs interleaved, followed by revAssets.
4. Introduce an error in one parallel task (e.g., throw new Error('fail styles'); inside styles) and run again; the other parallel task (scripts) should still run to completion before the build stops, proving independent execution.