Question

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

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

按设计工作。

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

有没有办法告诉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})

在共享文件更新中使用Jekyll时只重新加载BrowserSync一次

1 个答案: