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 pairsBy 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:
--moduleis assumed on a per-file basis if the file extension is.mjsor.es2015.js--nomoduleis assumed on a per-file basis if a matching es2015 module file is present
See:
--stylesheets [--media value] <stylesheets>...Add <link rel="styleshsheet" href="..."> to the <head> for each stylesheet.
Options:
--media value
add the media query attributeSee:
--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 valueBy 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*.cssfor stylesheets*.icofor 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.jswill 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.jswill 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.jswill 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.jswill 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.jswill 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.jswill insert:
<script src="/path/to/my.js"></script>Scripts, auto detecting type="module" vs nomodule
html-insert-assets
--html ... --out ...
--scripts foo.mjs foo.jsScripts, manually specifying type="module" vs nomodule
html-insert-assets
--html ... --out ...
--scripts --module app.mjs
--scripts --nomodule app-legacy.jsMultiple favicons:
html-insert-assets
--html ... --out ...
--favicon --sizes=16x16 default.ico
--favicon --sizes=128x128 large.pngStylesheets:
html-insert-assets
--html ... --out ...
--stylesheets main.css
--stylesheets --media=print print-only.cssPreloading some .js and .jpg files.
html-insert-assets
--html ./index.tmpl.html
--out ./index.html
--preload load-later.js large-image.jpgwill insert:
<link rel="preload" href="./load-later.js" as="script">
<link rel="preload" href="./large-image.jpg" as="image">Originally forked from rules_nodejs.