html-template-cleaner

This utility removes extraneous whitespace from template literals containing formatted HTML.

For example, the following method renders an address and the code is formatted for readability.

function renderAddress(addr) {
    return `
        <div>
            <div>${addr.line1}</div>
            <div>${addr.city}, ${addr.state} ${addr.postalCode}</div>
        </div>
    `;
}

After bundling and minifying the code, the whitespace between the HTML tags will still be present.

The html-template-cleaner reduces the above to the following:

function renderAddress(addr) {
    return `<div><div>${addr.line1}</div><div>${addr.city}, ${addr.state} ${addr.postalCode}</div></div>`;
}

Install

npm install html-template-cleaner

Usage

html-template-cleaner <directory>

All *.js files in the directory will be processed by the cleaner. The names of the files will remain the same.

Here is an example of using this with esbuild.

"scripts": {
    "build": "esbuild index.js login.js --bundle --minify --format=esm --outdir=./dist & html-template-cleaner ./dist"
}

Whitespace Removal

The following whitespace is removed:

• whitespace between > and <
• whitespace between > and ${
• whitespace between } and <