0

我有一个 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'});
});
4

1 回答 1

0

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

更改_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()
);

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

browserSync.reload({reloadDelay: 5000})
于 2016-06-28T23:59:38.983 回答