How to get Gulp watch working after migration from v3 to v4?

Question

I have an app with a very moderate gulpfile. I've just upgraded Gulp from v3.9.1 to v4.0.2 and adapted the gulpfile.js. All tasks are working fine again, only the watching is not.

There are no errors, but Gulp watch seems not to be checking the defined files for changes:

$  gulp -v
CLI version: 2.2.0
Local version: 4.0.2
$ gulp
[11:39:34] Using gulpfile /var/www/.../my-app/gulpfile.js
[11:39:34] Starting 'default'...
[11:39:34] Starting 'run'...
[11:39:34] Starting 'build-less'...
[11:39:34] Finished 'build-less' after 16 ms
[11:39:34] Starting 'build-vendors'...
[11:39:34] Finished 'build-vendors' after 5.5 ms
[11:39:34] Finished 'run' after 23 ms
[11:39:34] Starting 'watch-files'...
[11:39:34] Starting 'watchFiles'...

How to get Gulp watch working for Gulp v4?

---

Here is my original gulpfile.js for Gulp v3:

/**
 * Gulp File
 *
 * run `gulp run && gulp watch-files` on the command line
 */

// Include Gulp plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    watch = require('gulp-watch'),
    prefix = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    path = require('path')
;

// Compile LESS to CSS
gulp.task('build-less', function() {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    gulp.src('./public/less/*.less') // path to less file
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/')) // path to css directory
    ;
});

// Get vendors' code
gulp.task('build-vendors', function() {
    gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
        .pipe(plumber())
        .pipe(less())
        .pipe(rename(function (path) {
            //rename all files except 'bootstrap.css'
            if (path.basename + path.extname !== 'bootstrap.css') {
                path.basename = 'bootstrap-' + path.basename;
            }
        }))
        .pipe(gulp.dest('./public/css')) // path to css directory
    ;
});

// Run the build process
gulp.task('run', ['build-less', 'build-vendors']);

// Watch all LESS files, then run build-less
gulp.task('watch', function() {
    gulp.watch('public/less/*.less', ['run'])
});

// Default will run the 'entry' task
gulp.task('default', ['watch', 'run']);

Here is the new variant for Gulp v4:

/**
 * Gulp File
 *
 * run `gulp run && gulp watch-files` on the command line
 */

// Include Gulp plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    watch = require('gulp-watch'),
    prefix = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    filter = require('gulp-filter'),
    rename = require('gulp-rename'),
    path = require('path')
;

// Compile LESS to CSS
function buildLess(done) {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    gulp.src('./public/less/*.less') // path to less file
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/')) // path to css directory
    ;
    done();
};

// Get vendors' code
function buildVendors(done) {
    gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
        .pipe(plumber())
        .pipe(less())
        .pipe(rename(function (path) {
            //rename all files except 'bootstrap.css'
            if (path.basename + path.extname !== 'bootstrap.css') {
                path.basename = 'bootstrap-' + path.basename;
            }
        }))
        .pipe(gulp.dest('./public/css')) // path to css directory
    ;
    done();
};

// Watch all LESS files, then run build-less
function watchFiles() {
    return gulp.watch(['public/less/*.less'], gulp.series('build-less'));
};

gulp.task('build-less', buildLess);
gulp.task('build-vendors', buildVendors);
gulp.task('run', gulp.series('build-less', 'build-vendors'));
gulp.task('watch-files', gulp.series(watchFiles));
gulp.task('default', gulp.series('run', 'watch-files'));

Answer 1

it works very well i just tested

i did installed the last version of gulp in global

npm install gulp -g

gulp -v CLI version: 2.2.0 Local version: 4.0.2

then

gulp run watch-files

it update the css file after any changes

So i suggest to use path package instead of writing statically the folder's path.

Example:

path.resolve(__dirname, "foo/bar/less/");