resource-embedder
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 <script>...</script>
or <style>...</style>
elements.
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.
Usage
npm install resource-embedder
var ResourceEmbedder = require('@anvilco/resource-embedder');
var embedder = new ResourceEmbedder('./app/page.html');
embedder.get(function (markup) {
fs.writeFileSync('./dist/page.html', markup);
});
Choosing which files to embed
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 data-embed
attribute.
To always embed a particular resource, regardless of filesize, just include the attribute:
<script src="foo.js" data-embed></script>
<link rel="stylesheet" href="foo.css" data-embed>
To prevent a particular script from ever being embedded, set it to false
(or 0
):
<script src="foo.js" data-embed="false"></script>
<link rel="stylesheet" href="foo.css" data-embed="false">
To embed a particular resource only if it is below a certain size, specify the maximum number of bytes, or something like 5KB
:
<script src="foo.js" data-embed="2000"></script>
<link rel="stylesheet" href="foo.css" data-embed="5KB">
Options
To specify options:
new ResourceEmbedder('./file.html', options);
...or just: new ResourceEmbedder(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.) -
threshold
(default:"5KB"
) — all resources below this filesize will be embedded. NB: you can set this to0
if you want, in which case nothing will be embedded except those resources you mark with adata-embed
attribute (see above). -
stylesheets
(default:true
) — whether to embed stylesheets. -
scripts
(default:true
) — whether to embed scripts. -
deleteEmbeddedFiles
(default:false
) – whether the external files should be deleted after being embedded.
Contributing
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.
Tasks
When you're working on a specific module in src
, e.g. parse-file-size.coffee
, first run grunt watch:parse-file-size
in a terminal and keep the window open. Then open src/parse-file-size.coffee
and 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.
Release History
(Nothing yet)
License
Copyright (c) 2013 Callum Locke. Licensed under the MIT license.
Wishlist
- Connect/Express middleware
- ability to specify root for relative paths, in case different from the HTML file
- remove
data-embed
attributes from elements that don't get embedded, so they don't litter the output markup unnecessarily