As you can see in the order of operations section,
after any change in the watch mode (with
lume --serve or
lume --watch), the
entire site is built again. This happens because it's almost impossible to
know in advance which pages will be affected by a change in any file. For
- A change in a CSS file can affect to other CSS files that
@importit (if you use postcss plugin).
- If you also use the inline plugin, that can insert the CSS code in the HTML, this change will affect to all HTML pages.
Lume is conservative about the updating process, to make sure that any change in any file will be correctly applied to all pages. This is why the entire site is rebuilt after any change.
In large sites, or sites with expensive processors (like bundlers) this can increase the duration of the update process. There's a way to customize this behavior using a feature named Scoped Updates. It's a way to define different "scopes" (collections of independent files whose changes won't affect to other pages).
- Changes in any CSS file only affects to other CSS files.
- Changes in any JS/TS file only affects to other JS/TS files.
- Changes in any other file (Nunjucks, Yaml, Markdown, etc) won't affect to CSS, JS or TS files.
In this case you create two scopes, one for CSS files and other for JS/TS files.
To do that, just add this code to your
site.scopedUpdates( (path) => path.endsWith(".css"), //Select all *.css files (path) => /\.(js|ts)$/.test(path), //Select all *.js and *.ts files );
Every function passed to this function will create a new scope. Now, if a
file changes, only the
.css files are rebuilt, but not any other file. If a
.ts file is updated, only these files are built. And if any other
file changes, all files are rebuilt except