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><meta meta="meta" />console.log("Hello World!");<p>Main content ${props.foo}</p>In /dist you'd have simply index.html, containing:
<html>
<head>
<meta meta="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>
<meta meta="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).