damonbauer/npm-build-boilerplate

[Question] How to minify all HTML files in folder (and all folders within)?

revelt opened this issue · 2 comments

revelt commented

Hi Damon,

Thanks for this amazing boilerplate. I'm using it to run my static website (Hugo) build. The problem with rendered HTML pages is that their source ends messed up, with weird indentations and gaps in the HTML code.

Do you know, is it possible to minify all the .html files recursively in a folder in root (public/) using npm run script? I tried minimize from npm and while it's easy to minify one HTML file:

minimize --output public/index.html public/index.html

it's not so easy to feed the folder and make it overwrite all HTML files. The following doesn't work:

minimize --output public/**/*.html public/**/*.html

Do you know any way to minify (and overwrite) all HTML files for given folder using npm scripts?

Thank you.

Here's my question on StackOverflow, nobody replied nearly in a week.

damonbauer commented

Hey @revelt -

Thanks for the kind words. Minifying HTML can certainly be done with npm scripts.

I used html-minifier with the --input-dir and --output-dir options to get recursive files to minify.

Here's the command I ran:

html-minifier --input-dir ./test --output-dir ./test-out --html-5 --collapse-whitespace

So your npm script could look something like this:

"minify:html": "html-minifier --input-dir ./test --output-dir ./test-out --html-5 --collapse-whitespace",
"build:html": "npm run minify:html",
"watch:html": "onchange 'src/**/*.html -- npm run build:html"

Give that a shot. Hope it helps!

  • 👍2
revelt commented

Hi @damonbauer thank you for prompt reply and solution. I found the script works, but only when there are no images in the folder. When there are any, it gets stuck. It's a bit of a blocker — my static website contains lots of non-HTML files in the input!

I filed the issue in html-minifier's page.

Thank you again for your help.

  • 👍2