Wrong gulp example?

I’ve integrated browser-sync in my gulp tool chain like this: http://www.browsersync.io/docs/gulp/#gulp-reload. The part I’m questioning is this one:

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], browserSync.reload);

Basically gulp is watching the js-directory and this ‘js-watch’ should be called every time a change is detected.

The problem I’ve experienced is, that this task never ends, looks like browserSync.reload never returns anything (in the command line i never see any ‘finished js-watch’ information) and the browser therefore reloads only once. Every change after the first one, won’t result in any browser reload, as the ‘js-watch’-task is still running.

The following code fixed this for me:

gulp.task('js-watch', ['scripts'], function(){
    browserSync.reload();
    return;
});

[haluvibe]

Igladdy is 100% correct! This example worked for me. Note: Using Gulp 4

function reload(done) {
  browserSync.reload();
  done();
}

gulp.watch('src/styles/*.css', gulp.series(postCss, reload));

[lgladdy]

For what it’s worth, I came here after having this issue, but it wasn’t related to an anonymous function.

It was due to a change in how gulp processes watch tasks, which was way over my head, but explained in https://github.com/gulpjs/gulp/issues/1623 and https://github.com/gulpjs/gulp/issues/1624

An example of how to handle the done function properly is in this merge request that fixes the issue for Zurb Foundation: https://github.com/zurb/foundation-zurb-template/pull/37/files