How to make Gulp watch monitoring files?

Question

I have a simple gulpfile.js, that defines only two tasks, buildLess and watchFiles:

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

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

function watchFiles() {
    gulp.watch(['public/less/*.less'], gulp.series('build-less'));
    // gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};

gulp.task('build-less', buildLess);
gulp.task('watch-files', watchFiles);

The first one ($ gulp build-less) is working fine. The watchFiles ($ gulp watch-files) can be started and doesn't cause any errors, but changes on the public/less/style.less are ignored.

What is wrong at this gulpfile.js and how to get the watch-files task working?

Answer 1

The gulp.series API allows you to pass a string of a previously registered task. In your code, you haven't registered build-less yet.

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

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

gulp.task('build-less', buildLess);

function watchFiles() {
    gulp.watch(['public/less/*.less'], gulp.series('build-less'));
    // gulp.watch(['./public/less/*.less'], gulp.series(buildLess));
};

gulp.task('watch-files', watchFiles);

I would note that Gulp does not recommend using the gulp.task API anymore to register tasks, but instead to use exports.

Secondly, you don't need gulp-watch, as gulp now comes with its own gulp.watch method (which you are already using).

Lastly, you should make sure to your correctly signaling async completion in your buildLess function. Below, I've changed that function to return a Stream, rather than calling a done() callback since as you have it written, you have a race condition where done() may be called before the Less compilation has finished.

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var filter = require('gulp-filter');

function buildLess() {
    const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
    return gulp
        .src('./public/less/*.less')
        .pipe(fileFilter)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./public/css/'));
}
exports['build-less'] = buildLess;

function watchFiles() {
    gulp.watch(['public/less/*.less'], buildLess);
}
exports['watch-files'] = watchFiles;

Overall, I'd go through Gulp's documentation. They recently updated their website, and updated their documentation along with it. Going through that might clear up some other questions you may be having.