changing syntax of gulp 3 to gulp 4, problems w differences 3 and 4 versions

Question

I have this code on gulp 3.9.1, now i have installed gulp 4 and i have errors while my project is compiling

I have this common error:

AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (C:\Users\arsgt\Desktop\gravitzapa\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (C:\Users\arsgt\Desktop\gravitzapa\node_modules\undertaker\lib\task.js:13:8) at Object. (C:\Users\arsgt\Desktop\gravitzapa\gulpfile.js:19:6) at Module._compile (internal/modules/cjs/loader.js:1138:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Module.require (internal/modules/cjs/loader.js:1026:19) at require (internal/modules/cjs/helpers.js:72:18) at requireOrImport (C:\Users\arsgt\Desktop\gravitzapa\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) { generatedMessage: false, code: 'ERR_ASSERTION', actual: false, expected: true, operator: '==' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] dev: gulp npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\arsgt\AppData\Roaming\npm-cache_logs\2020-07-21T22_26_21_423Z-debug.log

I checking a lot of posts by this problem, but i couldn't understand what i have to edit in my code. I know that i have to use gulp.series('code') instead 'code'. Can you help me, i wanna understand differences in syntax between gulp 3 and gulp 4. What is the main aspects?

const gulp = require('gulp');
    const sass = require('gulp-sass');
    const autoprefixer = require('gulp-autoprefixer');
    const cssnano = require('gulp-cssnano');
    const browserSync = require('browser-sync');
    
    gulp.task('scss', () => {
      return gulp
        .src('dev/scss/**/*.scss')
        .pipe(sass())
        .pipe(
          autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {
            cascade: true
          })
        )
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({ stream: true }));
    });
    
    gulp.task('browser-sync', () => {
      browserSync({
        server: {
          baseDir: 'dist'
        },
        notify: false
      });
    });
    
    gulp.task('default', ['browser-sync', 'scss'], () => {
      gulp.watch('dev/scss/**/*.scss', ['scss']);
      gulp.watch('dist/*.html', browserSync.reload);
    });

Mark Mark · Accepted Answer · 2020-07-21T19:20:21

Change this:

gulp.task('default', ['browser-sync', 'scss'], () => {
  gulp.watch('dev/scss/**/*.scss', ['scss']);
  gulp.watch('dist/*.html', browserSync.reload);
});

to:

gulp.task('default', gulp.series('browser-sync', 'scss', () => {
  gulp.watch('dev/scss/**/*.scss', 'scss');
  gulp.watch('dist/*.html', browserSync.reload);
}));

Look at the task signature for v4 (https://gulpjs.com/docs/en/api/task#signature):

task([taskName], taskFunction)

It only takes 2 parameters, not 3 like v3 did. (In v3, the second parameter was an array of task names.) In v4 the second and last parameter is a single function, so you need

gulp.series('function1', 'function2', etc.)   // or gulp.parallel(...)

if you are going to call multiple tasks/functions. In gulp-speak you compose those multiple tasks/functions into a single gulp.series(...) or gulp.parallel(...).

changing syntax of gulp 3 to gulp 4, problems w differences 3 and 4 versions

1 Answers