0

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?

automatix
  • 14,018
  • 26
  • 105
  • 230

1 Answers1

0

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.

romellem
  • 5,792
  • 1
  • 32
  • 64
  • Thank you very much for your answer! To be honest, I don't think, the problem is, that `build-less` is not registered. Why? 1. `watchFiles()` is a function. Yes, it's _defined_ before the task `build-less` is defined -- but it's _used_, when the task is already defined. 2. I also tried `gulp.series(buildLess)` (see the commented out line in my code) -- and it also doesn't work. Now I tried our both solutions from your answer. But they are not working for me. Actually I think, perhaps it's not a code problem at all. Could you please test, whether my original code is also working for you. Thanks – automatix Jun 17 '20 at 09:34
  • Actually your original code did work for me in a simple test environment, but I think you may have some race conditions. One thing, what version of gulp do you have specified in your **package.json** file? – romellem Jun 18 '20 at 18:31
  • Thank you for the feedback! To you question: **`package.json`**: `"gulp": "^4.0.2"` and `"gulp-cli": "^2.2.0"`, **`package-lock.json`**: `"gulp": { "version": "4.0.2"` and `"gulp-cli": { "version": "2.2.0"`. – automatix Jun 19 '20 at 15:49