metalsmith-asset-references v0.1.1
Metalsmith Asset References
A Metalsmith plugin that replaces references to assets in your sources with hashed or fingerprinted references generated by another plugin
Installation
npm install metalsmith-asset-referencesExplanation
I became frustrated when using some of Metalsmith’s plugins for asset hashing (eg metalsmith-contenthash, metalsmith-fingerprint). These plugins provide a metadata object for looking up hashes, which can be used in templates as follows:
<img src='{{ hashes["/images/image.png"] }}'>This works fairly easily for references in markup files, but when you get to CSS files and their corresponding SASS/PostCSS/whatever workflow, and JS files and their corresponding Uglify/Webpack/whatever workflow, things get a little hairier! Sometimes you can use some Handlebars templating in the right part of your build process to get hashed references into CSS and JS files, and sometimes you can’t.
Instead, this plugin does a simple find and replace on your sources — finding any asset references by simple string comparison and swapping them out with the hashed versions. The main benefit here is there’s no special helper syntax specific to one templating language, so these references can go in any type of file without causing syntax errors (and then I discovered Spike...)
Usage
Add the plugin after your asset hashing plugin of choice. Then references images in any file from the project root with no special syntax.
metalsmith(__dirname)
.source("source")
.use(contenthash({ "**/*.{png,jpg,svg,js,css,woff,woff2}" }))
.use(references({ key: "hashes" })) // Change to "fingerprint" for metalsmith-fingerprint
// ...index.html (before)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/styles/style.css">
</head>
<body>
<img src="/images/image.png">
<script src="/scripts/script.js"></script>
</body>
</html>index.html (after)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/styles/style.ed7fd542688e317a.css">
</head>
<body>
<img src="/images/image.e3b0c44298fc1c14.png">
<script src="/scripts/script.b6ed35f5ae339a35.js"></script>
</body>
</html>