Asset pipelines
Compile Sass, bundle JavaScript, fingerprint, minify and purge CSS — from templates, at build time, in process.
Files in assets/ are not copied to the site. Templates get them with get_asset, transform them with filters, and publish the results they link:
{% set css = get_asset(path="scss/main.scss")
| to_css(options={"outputStyle": "compressed"})
| fingerprint %}
<link rel="stylesheet" href="{{ css.rel_permalink }}" integrity="{{ css.data.integrity }}">A resource is published when a template reads its rel_permalink or permalink, and only then. Results are cached for the build and, for images and remote files, on disk between builds.
| Step | Filter | Runs |
|---|---|---|
| Sass | to_css | in process |
| JavaScript bundling | js_build | in process (rolldown) |
| Fingerprinting and minification | fingerprint, minify | in process |
| Unused CSS | purge_css | in process |
| Bundling and generated files | concat_assets, asset_from_string, execute_as_template | in process |
| Post-processing | post_process, defer | after every page |
| Font subsetting | the [fonts] setting | after every page |
fugo runs no Node.js tools. To use Tailwind CSS, run its CLI next to fugo. Images have their own page: Image processing.
Finding assets#
get_asset(path="js/main.js")- One asset, or none.
find_asset(pattern="css/*.css"),find_assets(pattern="icons/**.svg")- The first or all assets matching a glob.
Themes and modules can ship assets; mounts can add more directories under assets/ (this documentation mounts the repository’s brand/ directory as assets/brand). See Modules.
- Sass Compile Sass and SCSS to CSS in process with to_css — imports, include paths, variables from templates and output styles.
- JavaScript bundling Bundle JavaScript and TypeScript in process with js_build — imports from assets and node_modules, JSX, parameters from templates, source maps.
- Fingerprinting and minification Minify HTML, CSS, JavaScript, JSON, SVG and XML, and give files content-hashed names with Subresource Integrity.
- Unused CSS Ship each page only the CSS rules it uses, with fugo's built-in purge_css — no PostCSS or PurgeCSS needed.
- Font subsetting Cut the site's fonts down to the characters its pages and style sheets use, after the build, in process — an icon font from 150 KB to 3 KB.
- Bundling and generated files Concatenate assets, create resources from strings, and render assets as Tera templates.
- npm packages List npm packages in package.json; fugo installs them when it builds, without Node.js or npm.
- Tailwind CSS Run Tailwind's own CLI next to fugo and publish the stylesheet it writes as an asset.
- Post-processing Delay a resource or a piece of a template until every page is rendered, for steps that need to know the whole site.