在 Gulp 中使用 Jekyll 进行共享文件更新时仅重新加载 BrowserSync 一次

Question

我有一个 Jekyll 站点，它是 Gulp 项目的一部分，它使用 BrowserSync 来预览该站点的构建。我的watch 语句之一查找对html 的更改，以便自动刷新站点。

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

按设计工作。

但是，当我更新header.html（或任何其他共享文件）时，浏览器会刷新多次次，因为所有页面都发生了变化。这是有道理的，因为所有静态页面都在更新。但我想在更新共享文件时防止这种情况发生。

有没有办法让 Gulp/BrowserSync 在共享 Jekyll 文件更新时只刷新一次？

更新

我的手表如下所示：

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

docs:build 任务：

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

Answer 1

#编辑在你的问题版本之后：

_site 的变化是dev:sass 或docs:build 任务的结果，因此，您可以从这些任务内部调用browserSync.reload。然后，您将确保它只附加一次。

# 结束编辑

所以，你正在观看一个被监视的过程。

您有一个 jekyll serve 正在运行，默认情况下它会监视根目录的任何更改，并为所有文件（包括“_includes”文件）触发生成。

对于 _include 文件更改，您可以在 _site 文件夹中有 10 个页面 + 10 个帖子 + 10 个集合项 = 30 个刷新页面，这会导致 30 个 gulp.watch 更新被触发。

你最好注意基本的 jekyll 文件和文件夹的变化：

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

甚至添加一个reload delay 以允许 jekyll 花时间重新生成一个大站点并在下降时间后重新加载：

browserSync.reload({reloadDelay: 5000})