Commandline HTML compilation with partial includes. Useful for super quick templating, or perhaps bundling things into an iframe.
Yes. However, they all miss at least one of the following requirements:
- No webpack necessary
- Glob folder support
- Watch
- Relative paths
- Nested includes
- Filetypes other than .html, e.g. .js
- Minification
- Saving compiled files with ignoreable filenames
- Passing parameters to includes, like props to a component
npm i --save-dev html-includes
Add the script into your package.json along the lines of:
"scripts": {
"compile": "html-includes --src src --dest dist",
"compile:min": "html-includes --src src --dest dist --minify"
},
See options below for more options.
npm run compile
There is an example project here with more features but put simply, here is how you'd use the script parameters above:
<html><head>
${require('./_meta.html')}
<script>${require('./_script.js')}</script></head><body><main>
${require('./_main.html') foo=`and you can also pass props`}
</main></body></html><metameta="meta" />console.log("Hello World!");<p>Main content ${props.foo}</p>In /dist you'd have simply index.html, containing:
<html><head><metameta="meta" /><script>console.log("Hello World!");</script></head><body><main><p>Main content and you can also pass props</p></main></body></html>Or with the --minify flag, you'd get:
<html><head><metameta="meta" /></head><body><main><p>Main content</p></main></body></html>| Flag | Description | Default |
|---|---|---|
--watch | Watch for file changes | false |
--src | Source dir | "src" |
--dest | Compiled output dir | "dist" |
--minify | Enable Minification of HTML | false |
--minify option=[boolean] | Set any of the boolean options in https://github.com/kangax/html-minifier#options-quick-reference - e.g --minify conservativeCollapse=true | Various typical values |
--quiet | Silence successful save logs | false |
- Filenames starting with an
_underscore will not be saved into destination (in the style of partial files in Sass).