Gulp isn't running and I don't know why

Question

I am using gulp in a wordpress theme and I keep getting this error about something not being a function inside the gulp-cli folder.

  gulpInst.on('start', function(evt) {
           ^

TypeError: gulpInst.on is not a function

Here is my gulpfile.js

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const terser = require('gulp-terser');

// SASS Task
function scssTask() {
    return src(['assets/sass/*.scss', 'assets/sass/**/*.scss'], { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest('assets/css', {sourcemaps: '.' }));
}

// JavaScript Task
function jsTask() {
    return src('assets/js/*.js', { sourcemaps: true })
    .pipe(terser())
    .pipe(dest('dist/js', { sourcemaps: '.' }));
}

// Watch Task
function watchTask() {
    watch('*.php');
    watch(['assets/sass/**/*.scss', 'assets/js/*.js'], series(scssTask, jsTask));
}

// Default Gulp Task
exports.default = series(
    scssTask,
    jsTask,
    watchTask
);

I have already tried uninstalling gulp and reinstalling it but nothing is fixing this error. Any idea how to fix this?

Answer 1

Update gulp-cli to the latest and switch your watchtask() function with the one below:

function watchTask() {
    watch(['*.php', 'assets/sass/**/*.scss', 'assets/js/*.js'], series(scssTask, jsTask));
}