范围更新

优化监听模式下的更新过程。

在 Lume 中，任何在监听模式下的更改（使用 lume --serve 或 lume --watch），都会重新构建整个站点。 发生这种情况是因为几乎不可能预先知道哪些页面会受到任何文件更改的影响。 例如：

  • CSS 文件中的更改可能会影响 @import 它的其他 CSS 文件（如果您使用 postcss 插件）。
  • 如果您还使用 inline 插件，将 CSS 代码插入到 HTML 中，则此更改将影响所有 HTML 页面。

Lume 在更新过程方面是保守的，以确保任何文件中的任何更改都将正确应用于所有页面。 这就是为什么在任何更改后都会重新构建整个站点的原因。

在大型站点或使用开销大的处理器（例如 bundler）的站点中，这会增加更新过程的持续时间。 可以使用 Scoped Updates 来自定义此行为。 这是一种定义不同“作用域”（独立文件的集合，其更改不会影响其他页面）的方法。

例如，假设您正在构建一个网站，其中包含一些 JavaScript 和 CSS 文件，并且这些文件是完全独立的，意味着：

  • 任何 CSS 文件中的更改只会影响其他 CSS 文件。
  • 任何 JS/TS 文件中的更改只会影响其他 JS/TS 文件。
  • 任何其他文件（Nunjucks、Yaml、Markdown 等）的更改都不会影响 CSS、JS 或 TS 文件。

在这种情况下，您可以创建两个作用域，一个用于 CSS 文件，另一个用于 JS/TS 文件。 为此，只需将以下代码添加到您的 _config.js 文件中：

site.scopedUpdates(
  (path) => path.endsWith(".css"), // 选择所有 *.css 文件
  (path) => /\.(js|ts)$/.test(path), // 选择所有 *.js 和 *.ts 文件
);

传递给此函数的每个函数都会创建一个新的作用域。 现在，如果一个 .css 文件发生更改，则只会重建 .css 文件，而不会重建任何其他文件。 如果 .js 或 .ts 文件被更新，则只会构建这些文件。 如果任何其他文件发生更改，则将重建除 .css、.ts 和 .js 文件之外的所有文件。

编辑此页