Lume has events that you can use to run some code at certain times during the
compiling process. You can configure those events in the _config.js
file with
the function addEventListener
.
beforeBuild
This event is triggered just before the site build starts. Note that if you are
watching the files with lume --serve
, this is only executed once before
the initial build. Use beforeUpdate for subsequent changes.
site.addEventListener("beforeBuild", () => {
console.log("The build is about to start");
});
Note: if the event listener returns false
, the build process is stopped:
site.addEventListener("beforeBuild", () => {
return false; // Stop the build
});
afterBuild
This event is triggered after build the site. Note that if you are watching the
files with lume --serve
, this is only executed once after the initial
build. Use afterUpdate for subsequent changes.
site.addEventListener("afterBuild", () => {
console.log("The build is finished");
});
beforeUpdate
This event is triggered every time a change is detected on build the site with
lume --serve
.
site.addEventListener("beforeUpdate", (event) => {
console.log("New changes detected");
console.log(event.files); // The files that have changed
});
Note: if the event listener returns false
, the update process is stopped:
site.addEventListener("beforeUpdate", () => {
return false; // Stop the update
});
afterUpdate
This event is triggered after re-build the site after detecting changes with
lume --serve
.
site.addEventListener("afterUpdate", (event) => {
console.log("Site updated");
console.log(event.files); // The files that have changed
});
afterRender
This event is triggered just after all pages are rendered but before process.
site.addEventListener("afterRender", (event) => {
console.log("All pages rendered");
});
beforeSave
This event is triggered just before saving the generated pages.
site.addEventListener("beforeSave", (event) => {
console.log("All pages are about to be saved");
});
Note: if the event listener returns false
, the save process is stopped:
site.addEventListener("beforeSave", () => {
return false; // Don't save the files
});
Execute scripts with events
In addition to functions, you can also execute scripts in events by passing a string with the script name.
// Create the script
site.script("compress", "gzip -r _site site.gz");
// Execute it after build the site
site.addEventListener("afterBuild", "compress").
// Or you can run any script directly
site.addEventListener("afterBuild", "gzip -r _site site.gz").
Events options
Similar to
web APIs
the third argument of addEventListener
allows to customize the event listener.
The available options are:
- once: To run the listener only once and then remove it.
- signal: To provide an
AbortSignal
to remove the listener at any time.
Example of a listener executed only once:
site.addEventListener("afterUpdate", () => {
console.log("This is the first update");
}, {
once: true,
});
Example of signal usage:
const controller = new AbortController();
let times = 0;
site.addEventListener("afterUpdate", () => {
times++;
// Remove the listener after 5 times
if (times === 5) {
controller.abort();
}
console.log(`This is the update ${times}`);
}, {
signal: controller.signal,
});