0

I am working on a simple gulpfile and noticed an issue with gulp.watch method. If I add a new file to an empty directory gulp.watch will not fire. However if there is at least one file in the directory all change events are detected. I could obviously restart my "watch" task every time there is an empty directory added with a new file or I add a file to an existing empty directory but that seems counter intuitive to the purpose of gulp.watch method.

To be clear watch does detect files that are added and deleted only after at least one file exists in that directory.

My question is wether or not this is a bug exclusive to me or if more people have experienced this. Also does anyone know of a current work around?

Here is my gulp task:

gulp.task('watch', () => {
var watcher = gulp.watch('src/styles/scss/*.scss', {cwd: './'}, ['styles']);

watcher.on('change', (event) => {
    console.log(`File ${event.path} was ${event.type}, running tasks...`);
});

Current gulp version: 3.9.1

P.S. I also know this may be a limitation of the technology I just don't what to report a bug to the gulp team that isn't a bug.

Thanks!

heyitsgeo
  • 11
  • 3
  • Did you try `watcher.on('added', (event) => {`? – peinearydevelopment Dec 01 '17 at 17:41
  • As far as I can tell "change" is triggered on add, delete and change so after the initial file has been added my console log looks like this if a file is added: "path/to/file.scss was added, running tasks..." and the "styles" gulp task is fired off. – heyitsgeo Dec 01 '17 at 17:44
  • Possible duplicate of [Gulps gulp.watch not triggered for new or deleted files?](https://stackoverflow.com/questions/22391527/gulps-gulp-watch-not-triggered-for-new-or-deleted-files) – peinearydevelopment Dec 01 '17 at 18:12
  • Ya I looked at this question which was how I got to the point where it would detect adds and deletes after the directory had at least one file in it. It seemed like they were saying add and deleted files were not detected at all and then future answers specified how to get it to work. – heyitsgeo Dec 01 '17 at 18:18
  • This has a possible answer https://stackoverflow.com/questions/24296839/why-dont-newly-added-files-trigger-my-gulp-watch-task?rq=1 var watcher = gulp.watch(['src/styles/scss/*.scss', 'src/styles/scss'], {cwd: './'}, ['styles']); – Mark Dec 02 '17 at 01:17

1 Answers1

0

Awesome! Thank you, Mark for getting me in the right direction. It is not a bug there is just a specific way you have to do it.

gulp.task('watch', () => { 
    var watcher = gulp.watch(['src/styles/scss/*.scss', 'src/styles/*],{cwd: './'}, ['styles']);

watcher.on('change', (event) => {
    console.log(`File ${event.path} was ${event.type}, running tasks...`);
});

The trick is watching your parent directory for any changes. This will now detect file changes as well as added and deleted files in empty subdirectories.

heyitsgeo
  • 11
  • 3