Utility to inject reference or inline assets in your HTML
Use cases
- Automatically inject a long list of assets in your index.html
- Automatically inject files which names are updated often, like when using
hashmark - Just list all your assets
- Generate an appcache manifest
- Concat files
- ???
-
Write a basic (HTML) mustache template using extensions as iterators:
<html> <head> <title>injectassets - example</title> {{#inline_css}} <style>{{{.}}}</style> {{/inline_css}} {{#css}} <link href="{{{.}}}" rel="stylesheet" type="text/css"> {{/css}} </head> <body> <h1>It works!</h1> {{#js}} <script src="{{{.}}}"></script> {{/js}} {{#inline_js}} <script>{{{.}}}</script> {{/inline_js}} </body> </html>
-
Run the command:
Usage: injectassets [options] Options: -h, --help output usage information -V, --version output the version number -s, --source <path to template> template file path, default: stdin -o, --output <path> result output path, default: stdout -g, --reference-globs <globs...> globs for files to be inject as references -G, --inline-globs <globs...> globs for files to be inlined -d, --dir <assets folder> injected assets directory, default: "./" -p, --pattern <string> use this pattern to generate paths, default {dir}/{base} -t, --tags <string> specify open/close tags. default: "{{,}}" -w, --watch run on every source file change -e, --encoding <string> read/write encoding, encoding "utf-8"
-
Use stdin and stdout, insert files path with the
-g, --reference-globsoption.cat src/index.html | injectassets -g '*.{css,js}' # print HTML to stdout
-
Use a source file
injectassets -g '*.{css,js}' -s src/index.html -
Output to a file
cat src/index.html | injectassets -g '*.{css,js}' -o dist/index.html # or simply cat src/index.html | injectassets -g '*.{css,js}' > dist/index.html
-
Specify directory containing the assets with
-d, --dircat src/index.html | injectassets -d 'dist/' -g '*.{css,js}'
-
Decide how files path will be formatted. Keys are all the values returned by
path.parse()(i.e:root,dir,base,name,ext)cat src/index.html | injectassets -g '*.{css,js}' -p '/public/{name}{ext}'
-
Inline files content with the
-G, --inline-globsoptioncat src/index.html | injectassets -G '*.{css,js}'
-
Inline some files, inject references some others
cat src/index.html | injectassets -G 'critical*.{css,js}' -g '!(critical)*.{css,js}'
-
Specify multiple globs separating them with
;cat src/index.html | injectassets -G 'scripts/*.js;styles/*.css'
-
Watch for any change on specified globs and rerun automatically with
-w, --watchcat src/index.html | injectassets -G 'scripts/*.js;styles/*.css' -w -o dist/index.html
-
Use square brackets instead of curly brackets for template:
cat src/index.html | injectassets -t '[[,]]' -g '*.{css,js}'