Gulp watch not emitting event object

Question

Gulp (4.0) throws the error "Error: Invalid glob argument: undefined" when I attempt to gulp.src the path of a changed file obtained from gulp.watch. Both this:

gulp.task('watch', function() {
    gulp.watch('./web/**/*.html')
        .on('change', function(file) {
            gulp.src(file.path)
                .pipe(gulp.dest('./output'));
        });
});

and this syntax variant:

gulp.task('watch', function() {
    gulp.watch('./web/**/*.html', function(file) {
        gulp.src(file.path)
            .pipe(gulp.dest('./output'));
    });
});

yield the same result.

Logging file.path before the gulp.src also outputs "undefined".

To reproduce:

npm install -g gulp@github:gulpjs/gulp#4.0

and create a gulpfile.js containing:

const gulp = require('gulp');

followed by either of the examples.

My understanding is that this is the way in which the changed file's path should be accessible as per the docs, so I'm not sure where I'm going wrong?

Answer 1

That documentation is all kinds of wrong. E.g it talks about gaze events, but gaze is no longer used to watch for file changes in gulp 4.0; it has been replaced by chokidar.

Concerning your problem the docs are wrong about the way you have to access the file path. The .on('change') callback function is not passed an event object, so there is no .path property.

Instead the file path is passed as a string, so your first example should look like this:

gulp.task('watch', function() {
    gulp.watch('./web/**/*.html')
        .on('change', function(file) {
            gulp.src(file)
                .pipe(gulp.dest('./output'));
        });
});

The callback function in your second example doesn't receive a path at all. It's passed a done callback, in order to facilitate task execution via gulp.series() or gulp.parallel().