The Artifact definition is how you can specify custom build artifacts. When the build command is run, Modulo loops through all defined Artifacts and outputs the files they generate. This is how the JS, CSS, and HTML files get generated whenever you run build by default. For most users, this is enough--this website uses the default Artifacts, for example. However, if you want to create custom build outputs for advanced usage in building a SSG-powered site, then you can use this feature to create as many extra files per HTML file you SSG as you'd like. For example, you could loop through images, generating a "thumbnail" page for each one. It's very versatile, and gives you the full power of the Modulo templating language for JS, CSS, and prerendered / SSR'ed HTML.
It manages to be this versatile by functioning as a mini-scripting system for specifying and configuring builds, allowing for easy addition of minification, split bundles, or other file types. This gives very fine-grained control over output in a declarative way.
- Simply by registering an Artifact (
<Artifact name="css">, for example), you can begin to customize or add CSS output
- By adding a
remove=to your Artifact, you can scrub your HTML before saving the built version, e.g.
remove="div.delete-me"to remove all divs with
- By adding a
bundle=to your Artifact, you can specify which elements get bundled, or disable it with
This is how the default CSS build artifact is generated. Registering a similarly named one can let you override or tweak it's behavior:
This is how the default JS build artifact is generated. Registering a similarly named one can let you override or tweak it's behavior:
This is how the default HTML build artifact is generated. Registering a similarly named one can let you override or tweak it's behavior: