injectassets Build Status

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
  • ???

Usage

  1. 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>
    
    
  2. 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"
    

Examples

  • Use stdin and stdout, insert files path with the -g, --reference-globs option.

    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, --dir

    cat 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-globs option

    cat 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, --watch

    cat 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}'