gulp.watch stops watching files after first detection

[dman777]

After the first modification to index.html, gulp.watch will stop detecting changes to the file. This issue does not exist for me on 3.9.1.

gulp.task('watch', watch);

function reloadBrowserSync(cb) {
  console.log('sssssssssssssssss');
  cb();
}

function watch(done) {
  gulp.watch(['/home/one/github/one-drop/src/index.html',
             '/home/one/github/one-drop/src/app/**/*.html'], reloadBrowserSync);
}

one@development ~/github $ node --version
v4.2.2
one@development ~/github $ npm --version
2.14.7

one@development ~/github/drop $ gulp -v
[15:11:54] CLI version 1.2.2
[15:11:54] Local version 4.0.0-alpha.2

Reference issue 1783

[phated]

Please stop opening support questions here. This issue tracker is for bugs. Support questions should be directed to StackOverflow.

[dman777]

sorry, this isn't a bug since gulp 3.9.1 does not have this issue with the same exact code?

[phated]

No, it's changed behavior with the way the watch method works. When using a semver major bump, you can't expect things to go unchanged.

[joelwallis]

@phated I'm having the same issue and so others. Could you point out some documentation about why/what did it changed?

[contra]

@phated Do we have documentation for this behavior? Also wondering what changed here

[joelwallis]

Hey guys, we just found a strange solution. I was writing my gulp tasks using ES6, so tasks were defined using arrow functions:

// The args object is just a bunch of paths
gulp.task('watch', ['watch:html'])
gulp.task('watch:html', _ => {
  gulp.watch(args.html.watch, ['build:html'])
})
gulp.task('watch:css', _ => {
  gulp.watch(args.css.vendor.src, ['build:css'])
})

Replacing the arrows with normal anonymous functions suddenly solved the issue of gulp.watch() firing only once:

gulp.task('watch', ['watch:html'])
gulp.task('watch:html', function () {
  gulp.watch(args.html.watch, ['build:html'])
})
gulp.task('watch:css', function () {
  gulp.watch(args.css.vendor.src, ['build:css'])
})

So now I'm not completely sure if those errors are related. It's also weird.

[phated]

@contra this was fully documented at https://github.com/gulpjs/glob-watcher/blob/master/README.md with the 3.0.0 release of that library.

[phated]

@joelwallis if you are using that syntax, you aren't using gulp 4

[contra]

@phated I don't see this behavior documented there. .watch(globs, fn) should call fn every time a file matching the globs changes as long as the fn signals completion, right? This issue is saying that isn't what is happening.

[phated]

The author updated his sample after I closed it and likely didn't actually test because he was spamming us at the time. It behaves as documented: the fn is fired or queued given async completion and a 200ms default debounce.

[phated]

@contract and as I noted, the other person that jumped in this thread isn't using gulp 4...

[dman777]

Sorry, I replied with the answer but for some reason I can not find that reply. Perhaps I looked on preview and forgot to save.

I found the answer to this issue here: http://stackoverflow.com/questions/28681491/within-docker-vm-gulp-watch-seems-to-not-work-well-on-volumes-hosted-from-the-h

Most likely, if that person is transpiling the time gap is enough to cause his issue in which polling and interval options would fix this.

Side note.... this was a issue for me also with gulp 3 when using the cloud with a laggy connection.

[contra]

@phated Yeah, didn't see it prior to the edit so was confused about why his code wouldn't be working. Don't think there's anything else to discuss then.

[alexisdiel]

gulp.task("js:watch", () => gulp.watch("lib/*/.js", gulp.series("js", "reload")));

On first change, it works, but on second change, it don't runs "js" & "reload" tasks.

[joelwallis]

@alexisdiel I had this issue before. Try to setup your tasks using normal functions instead of arrow functions, just like I did before. Not sure why, but it worked for me in the past.

[alexisdiel]

@joelwallis, i've tried, but found the solution in other issues.

added the done parameter and called back at the end.

gulp.task("reload", (done) => { browserSync.reload(); done(); });
gulp.task("js:watch", () => gulp.watch("lib/*/.js", gulp.series("js", "reload")));

[arturparkhisenko]

@alexisdiel thanks for that!