修改 nunjucks 部分文件时重新加载 browsersync答案

【问题标题】：browsersync reload when a nunjucks partial file is modified修改 nunjucks 部分文件时重新加载 browsersync
【发布时间】：2021-06-07 16:54:21
【问题描述】：

我有一个 gulp 任务如下：

gulp.task("nunjucks", () => {
  return gulp
    .src([src_folder + "pages/**/*.njk"])
    .pipe(plumber())
    .pipe(
      data(() =>
        JSON.parse(fs.readFileSync(src_folder + "datas/dist/data.json"))
      )
    )
    .pipe(nunjucks())
    .pipe(beautify.html({ indent_size: 2 }))
    .pipe(gulp.dest(dist_folder))
    .pipe(browserSync.stream({match: '**/*.html'}));
 });

gulp.watch([src_folder + '**/*.njk'], gulp.series("nunjucks")).on("change", browserSync.reload);

我的项目结构如下所示：

原子、分子和有机体包含 nunjucks 部分。

我遇到的问题是，每当我更新部分文件（例如：organisms/partial1.njk）时，我的任务都会检测到 pages（我为任务 src 提供的路径）内所有文件的更改，因为你可以看这里：

我只想重新加载包含此部分文件而不是所有文件的文件。

我该如何解决这个问题？

【问题讨论】：

标签： gulp browser-sync nunjucks

【解决方案1】：

知道您的哪个 Nunjuck 页面包含部分内容并不取决于您的 gulp 任务。也许如果您在 Pages 文件夹中重新组合 .njk 文件，您可以更好地管理重新加载的内容。以下内容未经测试，但希望能传达这个想法......

pages/
  - init/
  - other-stuff/

然后，您可以将 gulp 任务中的 src 更新为类似...

 gulp.src([
      '!pages/other-stuff/**/*',
      'pages/init/**/*.njk'
    ])

【讨论】：