Browser-sync: Wrong gulp example?

[MattDiMu]

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;
});

[shakyShane]

The technique you've mentioned works well in my tests. I also use it in this recipe for compiling dog-slow jade templates.

Perhaps there's something else in your gulpfile.js setup that's causing this issue - I'd be more than happy to look at a sample repo highlighting this problem though.

[Enalmada]

+1. The current doc format only works once on the first reload after gulp first starts. After the first file change, the browser will not reload any more. The console after that point only says "Starting js: Finished js:"...it never says "Starting js-watch" again. I have been pulling my hair out trying to figure out how and why it could be skipping js-watch. Changing to anonymous function made it work every time!

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

So something in gulp must be being too smart for its own good and caching the relationship between the gulp watch *.js and the ultimate js task skipping the js-watch in the middle entirely.
(windows 8.1, using the latest version of browsersync, node, gulp, etc)

http://stackoverflow.com/a/30438407/1502448

[dongseok0]

I have investigated this issue and found the reason.
Task could be async or sync.

1. Async - Gulp requires the tasks let when it done by calling callback or returning promise/stream. - https://github.com/orchestrator/orchestrator#fn
2. Sync - Function needs to take 0 argument. - https://github.com/orchestrator/orchestrator/blob/master/lib/runTask.js#L58

So if we just use browserSync.reload in Gulp task, it is regarded as async task and not finished from first run. Because reload fn takes 1 arg.
( https://github.com/BrowserSync/browser-sync/blob/master/lib/public/reload.js#L20 )

You should fix document! - http://www.browsersync.io/docs/gulp/#gulp-reload

[JacobDB]

@Enalmada thank you so much for that! I was running in to the same issue and making it an anonymous function solved it. Spent two hours trying to figure this out.

[devinus]

Wow this took me forever to debug. Where are the docs for this http://www.browsersync.io/docs/gulp/#gulp-reload so I can change them myself.

[devinus]

gulp.task('js-watch', ['js'], browserSync.reload); does NOT work.

[fegemo]

+1 - it should be fixed in the docs

[adrinux]

Having this issue too. I wonder which gulp version people are using – I'm using Gulp 4.

Edited to add:
I also found wrapping the reload call in a function fixed the issue for me.

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

and then call as a task during watch (edited for simplicity):

gulp.task('watcher', () => {
  browserSync.init({
    server: {
      baseDir: 'hugo/published/dev'
    }
  });
  gulp.watch('src/styles/*.css', gulp.series(postCss, reload));
});

[lorthirk]

I faced this issue as well. Changing

gulp.task("reload", ["build"], browserSync.reload);

to:

gulp.task("reload", ["build"], function() {
    browserSync.reload();
});

fixed it.

[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

[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));

[krmao]

@haluvibe it works like a charm !!!

[matheus-moreira]

@lgladdy @haluvibe thanks for this!!!