html-insert-assets
Advanced tools
Insert assets such as scripts, stylesheets and shortcut icons into HTML.
Supports stamping of asset URLs, preloading assets and more fine grained options for specific asset types.
--html <file>
the HTML template to insert assets into
--out <file>
the output HTML file path
--scripts [--async] [--module] [--nomodule] [--attr name=value] <scripts>...
Add <script src="..."> elements to the end of the <body> for each script.
Options:
--async
adds the 'async' attribute
--module
marks the scripts as es2015 modules using the 'type="module"' attribute
--nomodule
marks the scripts as non-es2015 using the 'nomodule' attribute
--attr name=value
add custom attributes, can specify multiple name=value pairs
By default the script will only include the src attribute. If neither --module or --nomodule are present defaults are determined based on file extension or naming conventions:
--module is assumed on a per-file basis if the file extension is .mjs or .es2015.js--nomodule is assumed on a per-file basis if a matching es2015 module file is presentSee:
--stylesheets [--media value] <stylesheets>...
Add <link rel="styleshsheet" href="..."> to the <head> for each stylesheet.
Options:
--media value
add the media query attribute
See:
--favicons [--rel value] [--sizes value] [--type value] <images>...
Add <link rel="icon" type="..." href="..."> to the <head> for eached image.
Options:
--rel value
add the specified 'rel' attribute value, defaults to '"icon"'
--sizes value
add the specified 'size' attribute value
--type value
add the specified 'type' attribute value
By default rel="icon" is added and the type attribute is determined per-file based on file extension.
See:
--assets <assets>...
Attempts to automatically determine asset types based on file extension and inserts such assets with the default configurations listed above.
*.{js,mjs} for scripts*.css for stylesheets*.ico for favicons --preload <assets>...
Add <link rel="preload" href="..." as="..."> for each asset, determining the as attributed based on file extension.
Allows preloading assets that your page will need very soon, which you want to start loading early in the page lifecycle.
Adds paramaters to inserted URLs to create versioned URLs, allowing long cache times while busting the cache when resources change.
Functionality shared across asset types, using --scripts for these examples.
Basic relative paths:
html-insert-assets
--html ./index.tmpl.html
--out ./index.html
--scripts ./a.js b.js sub/c.js
will insert:
<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./sub/c.js"></script>
If the --out file is in a separate directory, URLs are relative to that directory
html-insert-assets
--html ./index.tmpl.html
--out ./sub/index.html
--scripts ./a.js b.js sub/c.js
will insert:
<script src="../a.js"></script>
<script src="../b.js"></script>
<script src="./c.js"></script>
Root asset directories to trim and convert to URLs relative to the the --out directory
html-insert-assets
--html ./index.tmpl.html
--out ./index.html
--roots .
--scripts ./a.js b.js sub/c.js
will insert:
<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./sub/c.js"></script>
Root directories of assets (multiple):
html-insert-assets
--html ./index.tmpl.html
--out ./index.html
--roots sub /abs/path
--scripts /abs/path/a.js b.js sub/c.js
will insert:
<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>
Root directories of assets (multiple + alternate --out):
html-insert-assets
--html ./index.tmpl.html
--out ./out/index.html
--roots sub /abs/path
--scripts /abs/path/a.js b.js sub/c.js
will insert:
<script src="./a.js"></script>
<script src="../b.js"></script>
<script src="./c.js"></script>
Absolute paths outside any root directories:
html-insert-assets
--html ./index.tmpl.html
--out sub/index.html
--roots sub /abs/path
--scripts /path/to/my.js
will insert:
<script src="/path/to/my.js"></script>
Scripts, auto detecting type="module" vs nomodule
html-insert-assets
--html ... --out ...
--scripts foo.mjs foo.js
Scripts, manually specifying type="module" vs nomodule
html-insert-assets
--html ... --out ...
--scripts --module app.mjs
--scripts --nomodule app-legacy.js
Multiple favicons:
html-insert-assets
--html ... --out ...
--favicon --sizes=16x16 default.ico
--favicon --sizes=128x128 large.png
Stylesheets:
html-insert-assets
--html ... --out ...
--stylesheets main.css
--stylesheets --media=print print-only.css
Preloading some .js and .jpg files.
html-insert-assets
--html ./index.tmpl.html
--out ./index.html
--preload load-later.js large-image.jpg
will insert:
<link rel="preload" href="./load-later.js" as="script">
<link rel="preload" href="./large-image.jpg" as="image">
Originally forked from rules_nodejs.
FAQs
Insert assets such as .js, .css into an HTML file.
The npm package html-insert-assets receives a total of 2,651 weekly downloads. As such, html-insert-assets popularity was classified as popular.
We found that html-insert-assets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.