@im-bravo/posthtml-versioning-path
v1.0.1
Published
PostHTML plugin for versioning path static assets
Downloads
7
Maintainers
im-bravoReadme
posthtml-versioning-path
[![NPM][npm]][npm-url]
posthtml-versioning-path is a PostHTML plugin for hashing file names to enable caching.
<html>
<head>
- <link rel="stylesheet" href="/[versioning_path]/styles.css" />
+ <link rel="stylesheet" href="/20231013220934001/styles.css" />
</head>
<body>
- <script src="/[versioning_path]/src.js"></script>
+ <script src="/20231013220934001/src.js"></script>
</body>
</html>Install
# npm
npm i -D @im-bravo/posthtml-versioning-pathUsage
By default, the plugin will attempt to hash file names that contain [versioning_path]. As an additional qualifier, only nodes containing href, src, or content attributes are eligible.
<html>
<head>
<!-- ✅ versioned -->
<link rel="stylesheet" href="/[versioning_path]/styles.css" />
<!-- ❌ not versioned -->
<link rel="stylesheet" href="reset.css" />
</head>
<body>
<!-- ✅ versioned -->
<script src="/[versioning_path]/src.js"></script>
<!-- ❌ not versioned -->
<script src="analytics.js"></script>
</body>
</html>const fs = require("fs");
const posthtml = require("posthtml");
const { versioningPath } = require("posthtml-versioning-path");
const html = fs.readFileSync("./processed/index.html");
function yourOwnVersioningLogic() {
const now = new Date()
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${year}${month}${day}${hours}${minutes}${seconds}`;
}
posthtml()
.use(
versioningPath({
path: "processed",
transformPath: (filepath) => {
return filepath
.replace("https://example.com/", "") //
.replace("[versioning_path]/", "")
},
versioningPath: ( ) => {
const versionPath = yourOwnVersioningLogic()
return versionPath
}
})
)
.process(html)
.then((result) => fs.writeFileSync("./processed/index.html", result.html));
For convenience, you can add the post-build script to your package.json. The postbuild script is automatically invoked following the build script.
{
"scripts": {
"build": "rollup -c",
"postbuild": "node postbuild.js"
}
}