Reload BrowserSync Only Once When Using Jekyll in Gulp on Shared File Update

Question

I have a Jekyll site which is part of a Gulp project, using BrowserSync to preview the site as it is built. One of my watch statements looks for changes to the html in order to auto-refresh the site.

gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload);

Works as designed.

However, when I update header.html (or any other shared file) the browser is refreshed multiple times because all the pages changed. This makes sense, since all the static pages are being updated. But I'd like to prevent this when updating a shared file.

Is there a way I can tell Gulp/BrowserSync to only refresh once when a shared Jekyll file is updated?

UPDATE

My watch set looks like the following:

gulp.task('dev:watch', ['browserSync', 'docs:sass', 'docs:lib', 'docs:build'], function () {
  gulp.watch(['scss/**/*.scss', 'docs/assets/**/*.scss'], ['dev:sass']);
  gulp.watch(['docs/**/*.html', 'docs/**/*.md', '!docs/_site/**'], ['docs:build']);
  gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload);
});

The docs:build task:

gulp.task('docs:build', function () {
  browserSync.notify('Building Jekyll');
  return spawn('jekyll', ['build', '--config', '_config.yml,_config_dev.yml', '--incremental'], {stdio: 'inherit'});
});

Answer 1

# Edit after your question edition :

Changes in _site are consequences of dev:sass or docs:build tasks, so, you can call browserSync.reload from inside those tasks. You will then be sure that it append one time only.

# End edit

So, you're watching a watched process.

You have a jekyll serve running, which by default is watching any change at the root and that fires a generation for all files including "_includes" files.

For an _include file change, you can have 10 pages + 10 posts + 10 collections items = 30 refreshed pages in _site folder, which leads to 30 gulp.watch updates fired.

You'd better watch basic jekyll files and folder for change with :

gulp.watch(
  ['*.html', '*.md',  '_includes/*.html', '_layouts/*.html', ...other files],
  browserSync.reload()
);

and even add a reload delay to allow jekyll take time to regenerate a big site and reload after a descent time :

browserSync.reload({reloadDelay: 5000})