Gulp: Migrating Gulpfile.js from gulp 3 to 4

Question

Here i am trying to migrate my existing site which is using gulp 3. Now upgrading gulp from 3 to 4.

Below is Gulpfile.js

'use strict';

var gulp = require('gulp'),
  autoprefixer = require('gulp-autoprefixer'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  scsslint = require('gulp-scss-lint'),
  jshint = require('gulp-jshint'),
  shell = require('gulp-shell'),
  spritesmith = require('gulp.spritesmith'),
  browserSync = require('browser-sync'),
  g = require('gulp-load-plugins')(),
  reload = browserSync.reload,
  src = {
    scss: '../scss/**/*.scss',
    css: '../css',
    baseCss: '../css/base',
    twigFile: '../pattern-lab/source/_**/**/*.twig',
    jsonFile: '../pattern-lab/source/_**/**/*.json',
    mdFile: '../pattern-lab/source/_**/**/*.md',
    latestChangeFile: '../pattern-lab/public/latest-change.txt',
    javascript: '../js/*.js',
    cssFile: '../css/*.css',
    imageSprite: '../images/sprite/*.png',
  };

// Build pattern-lab
gulp.task('build-pattern-lab', shell.task([
 'cd ../pattern-lab/; M | composer install --no-dev; cd ../.npm/;'
]));

// Task for local, static development.
gulp.task('local-development', gulp.series('sprite', 'style-split', 'pl-generate', function() {
  browserSync({
    server: {
      baseDir: "../",
    }
  });

  gulp.watch(src.scss, ['style-split']);
  gulp.watch(src.javascript, reload);
  gulp.watch(src.cssFile, reload);
  gulp.watch(src.twigFile, ['pl-generate']);
  gulp.watch(src.jsonFile, ['pl-generate']);
  gulp.watch(src.mdFile, ['pl-generate']);
  gulp.watch(src.imageSprite, ['sprite']);
  gulp.watch(src.latestChangeFile).on('change', reload);
}));

// Sprite.
gulp.task('sprite', function generateSpritesheets() {
  var spriteData = gulp.src('./../images/sprite/*.png')
    .pipe(spritesmith({
      padding: 5,
      imgName: 'sprite.png',
      imgPath: '../images/sprite.png',
      cssName: '_sprite.scss'
    }));

  spriteData.img.pipe(gulp.dest('./../images/'));
  spriteData.css.pipe(gulp.dest('./../scss/helpers/'));
  return spriteData;
});

// Sass watch, compile css when sass is changed.
gulp.task('sass-watch', ['style-split'], function () {
  gulp.watch(src.scss, ['style-split']);
});

// SCSS Lint.
gulp.task('scss-lint', function () {
  return gulp.src(src.scss)
    .pipe(
      scsslint({
        'config': 'scss-lint.yml',
      })
    );
});

// Task for compiling sass in development mode with all features enabled.
gulp.task('sass', function () {
  var stream = gulp.src('../scss/{,*/}*.{scss,sass}')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(autoprefixer({browsers: ['safari >= 8', 'last 3 versions', '> 2%']}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(src.baseCss));
  return stream;
});

gulp.task('style-split', ['sass'], function() {
  return gulp.src(src.baseCss + "/styles.css")
    .pipe(g.extractMediaQueries())
    .pipe(gulp.dest(src.css));
});

// Generate pattern-lab.
gulp.task('pl-generate', shell.task([
 'php ../pattern-lab/core/console --generate'
]));

// Javascript Lint.
gulp.task('js-lint', function () {
  return gulp.src(src.javascript)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});   
    
gulp.task('default', gulp.series('local-development', function() {
    console.log('Build completed.');
}));

When running the default gulp, it's throwing error as, AssertionError [ERR_ASSERTION]: Task never defined: sprite

I have used gulp 4 syntax for the task. Any specific action do i need to perform for migration ? Any help ?

Answer 1

Try defining your "sprite" task before it gets called in the "local-development" task (and any others that may fall into the same pattern).

When creating tasks via the gulp.task(...) form you do need to have those tasks created (so they can be registered) prior to their being called. Otherwise you will forward-referencing them.

Forward references

A forward reference is when you compose tasks, using string references, that haven't been registered yet. This was a common practice in older versions, but this feature was removed to achieve faster task runtime and promote the use of named functions.

In newer versions, you'll get an error, with the message "Task never defined", if you try to use forward references.

• from Forward reference documentation

One advantage of the function myGulpTask() {...} form of creating tasks is that do not need to be declared prior to calling them.