Back in the day we touched on some of the wonderful upsides of implementing Gulp into your workflow. If you have been following along and happened to install the latest version of Gulp, you may has noticed something horrible happen: nothing worked. I probably should’ve mentioned that the latest major update to Gulp, Gulp 4, is actually a breaking update. That's my bad.

Strangely, documentation around upgrading from Gulp 3.X to Gulp 4 seems to be lagging way behind this release, with the closest thing to official documentation being some article a guy posted on Medium a while back. Interesting strategy, Gulp team.

What's the Big Deal?

There are a couple architectural differences with Gulp 4, for the better. Previously Gulp would allows us to hold off on executing tasks until dependent task were completed. If task C were dependent on the completion of tasks both A and B, we would represent this as such:

gulp.task('default', ['A', 'B'], function() {etc});

gulp.task('A', ['C'], function() {etc});
gulp.task('B', ['C'], function() {etc});

gulp.task('C', function() {etc});

While this was an effective way of handling such a workflow, Gulp has made the process a bit cleaner and easier to digest with the additions of gulp.parallel and gulp.series.

Parallel denotes tasks which should be executed in parallel, aka the same time.

Series defines a linear order of how tasks should be executed. Parallels can exist inside of series, effectively resulting in a fork of tasks before moving to the next task in the series:

gulp.task('A', function() {etc});
gulp.task('B', function() {etc});

gulp.task('C', function() {etc});

gulp.task('default', gulp.series('C', gulp.parallel('A', 'B'), function() {etc}));

In this case, Task C forks into Tasks A and B before converging on their merry way to the rest of the series.

Quick Install

To get your hands on this, first uninstall your current versions of Gulp and Gulp CLI:

npm uninstall gulp --save-dev
npm uninstall gulp -g

Then we can go ahead and reinstall Gulp as normal. Feel free to force the version:

npm install gulp-cli -g
npm install gulp@4.0.0 -D

Example Gulp File

Enough with all the jargon, we both know what you came here for. let me just post what I see to be the bare minimum Gulpfile for your copy and pasting pleasure:

var gulp 	= require('gulp'),
  	less 	= require('gulp-less'),
  	concat 	= require('gulp-concat'),
  	uglify 	= require('gulp-uglify'),
  	rename 	= require('gulp-rename'),
    handlebars = require('gulp-handlebars'),
    declare = require('gulp-declare'),
    cleanCSS = require('gulp-clean-css');

var paths = {
  styles: {
    src: 'src/less/*.less',
    dest: 'assets/css'
  },
  scripts: {
    src: 'src/js/*.js',
    dest: 'assets/js'
  },
  html: {
    src: 'views/*.hbs',
    dest: 'assets/'
  }
};

function styles() {
  return gulp
  	.src(paths.styles.src, {
      sourcemaps: true
    })
	.pipe(less())
	.pipe(rename({
	  basename: 'main',
	  suffix: '.min'
	}))
.pipe(cleanCSS({debug: true}))
.pipe(concat('main.min.css'))
.pipe(gulp.dest(paths.styles.dest));
}

function scripts() {
  return gulp
	.src(paths.scripts.src, {
		sourcemaps: true
	})
	.pipe(uglify())
	.pipe(concat('main.min.js'))
	.pipe(gulp.dest(paths.scripts.dest));
}

function templates(){
  gulp.src('views/*.hbs')
    .pipe(handlebars())
    //.pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('assets/js/'));
}

function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, scripts, templates, watch);

gulp.task(build);
gulp.task('default', build);

Nothing crazy here: just the typical concat and minification of source files.

Hopefully this helps somebody wondering why their latest Gulp installation broke their Gulpfile. Perhaps next time we'll dig down deep into the shadows of Gulp plugins to reveal secret elite legendary Gulp hacks for 1337 hax0rs only. Or not, we could do whatever honestly.