@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-pipeline

Configuration

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),
  },
});

Code of Conduct

CODE_OF_CONDUCT

Changelog

CHANGELOG

License

LICENSE