@fec/eleventy-plugin-asset-pipeline
A plugin to manage assets in an Eleventy site. It adds a hash to the file name to help with cache busting and it gives you the ability to transform the asset contents.
Installation
npm install -D @fec/eleventy-plugin-asset-pipelineConfiguration
After installing the plugin you have to enable it in your Eleventy configuration:
eleventyConfig.addPlugin(cssPipelinePlugin, {});The second parameters are the options of the plugin.
| Option | Description | Default value |
|---|---|---|
extensions |
List of file extensions that should be handled by the plugin | [] |
compilerFns |
Functions for each file type | {} |
ignorePrivate |
Ignore private files, ie, files starting with _
|
true |
manifest |
Path to manifest file | './manifest.json' |
Filters
hashFileName
Given a file name and it returns the hashed file name. For example,
<link rel="stylesheet" href="{{ '/css/main.css' | hashFileName }}" />Examples
CSS with PostCSS
With the following configuration .css and .js files processed. JavaScript files are just hashed, while CSS files are hashed and the content is run through PostCSS.
eleventyConfig.addPlugin(cssPipelinePlugin, {
extensions: ["css", "js"],
compilerFns: {
css: (inputContent, inputFile) =>
postcss([require("postcss-import")])
.process(inputContent, { from: inputFile })
.then((result) => result.css),
},
});