metalsmith-html-glob
A Metalsmith plugin to apply glob patterns within HTML.
This plugin works by expanding glob patterns in hyperlinks and resource links such as <script src="**/*.js"></script>. See below for a complete example.
Installation
npm install --save metalsmith-html-globJavaScript Usage
const Metalsmith = require('metalsmith');
const glob = require('metalsmith-html-glob');
Metalsmith(__dirname)
.use(glob({
// options here
}))
.build((err) => {
if (err) {
throw err;
}
});Options
html (optional)
Type: string Default: "**/*.html"
A micromatch glob pattern to find HTML files.
tags (optional)
Type: object Default:
{
"a": "href",
"img": ["src", "data-src"],
"link": "href",
"script": "src"
}An object of what attributes in what tags to process glob patterns for.
Example HTML
Example Input
Given a file tree:
.
├── index.html
└── static
├── css
│ ├── bootstrap.min.css
│ └── fontawesome.all.min.css
└── js
├── bootstrap.min.js
└── popper.js
And index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="**/*.css">
</head>
<body>
<script src="**/*.js"></script>
</body>
</html>Example Output
This plugin will change the contents of index.html to:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
</head>
<body>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/popper.js"></script>
</body>
</html>