profile
viewpoint

Ask questionsgulp.watch with **/*.js and multiple globs not working on Windows

When watching files with Gulp 4, I have the following watch:

gulp.watch(['app/**/*.js', 'app/components/**/*.html']);

On OS X, it works fine for both JS and HTML files, but on Windows 7, making a file change to a JS file does not get detected.

Changing this to the following fixes the issue:

gulp.watch(['app/**/*']);

Also, watching only JS files also works as intended:

gulp.watch(['app/**/*.js']);

It seems only the combination of both globs breaks something causing JS files not to be watched on windows.

Possibly related to https://github.com/floatdrop/gulp-watch/issues/194

gulpjs/gulp

Answer questions mattpr

I know this is an old issue but since I have been running into it on MacOS with gulp latest I figured I would post here for other googlers.

I've been running into this on MacOS and I suspect it related to changes in gulp4, in particular that gulp.watch really needs an async function or it will only run once (https://gulpjs.com/docs/en/getting-started/watching-files/#warning-avoid-synchronous).

It appears to be caused by either using the following pattern (where copy is synchronous)...

function copy () {
    var newer = require('gulp-newer');
    return gulp.src([srcDir+'/**/*'])
        .pipe(newer(destDir))
        .pipe(gulp.dest(destDir));
}
function watch () { 
    gulp.watch(srcDir+'/**/*', copy);    // copy is synchronous, so wrap in gulp.series(copy) to fix
}
module.exports.watch = watch;

or this pattern...

function copy () {
    var newer = require('gulp-newer');
    return gulp.src([srcDir+'/**/*'])
        .pipe(newer(destDir))
        .pipe(gulp.dest(destDir));
}
function watch (done) { 
    gulp.watch(srcDir+'/**/*', copy);    // copy is synchronous
    return done();
}
module.exports.watch = watch;

...or some combination of the two. I didn't dig in further but updating my watch code to match the example here seems to have resolved the issue...

function copy () {
    var newer = require('gulp-newer');
    return gulp.src([srcDir+'/**/*'])
        .pipe(newer(destDir))
        .pipe(gulp.dest(destDir));
}
function watch () { 
    gulp.watch(srcDir+'/**/*', gulp.series(copy));    // copy is synchronous, so wrap in gulp.series(copy)
}
module.exports.watch = watch;

I also found some bugs in my some gulp watch code on my end that hadn't gotten fully updated from gulp3 and had stuff like gulp.watch(srcDir+'/**/*', gulp.task('old-task-name'))...of course old-task-name doesn't exist anymore in gulp registry. The interesting bit was there was no warning/complaint about referencing (trying to retrieve) a task by name from the task-registry that doesn't exist (anymore). Might be helpful for people migrating from gulp3 to output some helpful warnings/errors when using the deprecated task api.

useful!
source:https://uonfu.com/
Github User Rank List