Metalsmith-html-glob NPM

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-glob

JavaScript 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>