Also available as a Grunt plugin: grunt-embed
Automatically embeds the contents of external scripts and stylesheets into HTML markup.
Takes an HTML file path and generates a string of modified markup. Any small external scripts and stylesheets are replaced with inline
This reduces the number of HTTP requests in return for inflating your HTML. It's up to you to decide whether this is a good trade-off in your situation.
npm install resource-embedder
var ResourceEmbedder = ;var embedder = './app/page.html';embedder;
By default, any scripts or stylesheets below 5KB in size will be embedded. You can change this setting in the options.
You can also manually decide the threshold for each resource using a
To always embed a particular resource, regardless of filesize, just include the attribute:
To prevent a particular script from ever being embedded, set it to
To embed a particular resource only if it is below a certain size, specify the maximum number of bytes, or something like
To specify options:
new ResourceEmbedder('./file.html', options);
htmlFile— only required if you don't pass a file path as the first argument to the constructor.
assetRoot— (optional) – use this if you need to specify the directory that the relative resource URLs will be considered relative to. (By default, it's the same directory as the HTML file.)
"5KB") — all resources below this filesize will be embedded. NB: you can set this to
0if you want, in which case nothing will be embedded except those resources you mark with a
data-embedattribute (see above).
true) — whether to embed stylesheets.
true) — whether to embed scripts.
false) – whether the external files should be deleted after being embedded.
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Test your code using Grunt.
When you're working on a specific module in
parse-file-size.coffee, first run
grunt watch:parse-file-size in a terminal and keep the window open. Then open
test/parse-file-size_test.coffee and work on them side-by-side. New test results will appear in the terminal whenever you save either file.
You can also just do
grunt watch to watch all modules at once and run all test files whenever anything changes.
Copyright (c) 2013 Callum Locke. Licensed under the MIT license.
data-embedattributes from elements that don't get embedded, so they don't litter the output markup unnecessarily