mirror of
https://github.com/remy/inliner.git
synced 2024-10-26 18:49:55 +03:00
Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites
c439d79f5a
Fixes #26 Inliner was trying to resolve and request `data:` urls. Now it checks to see if it's already inlined. I also updated the whole `.get` method to make smarter use of the caching. Originally the cache is only populated when the request has completed, but if the same image is on the page 20 times, the request would be made 20 times. Now, we cache the promise, so the request is only placed once, and returns a re-usable promise if it's already in progress or resolved. |
||
---|---|---|
cli | ||
docs | ||
lib | ||
test | ||
.gitignore | ||
.jscsrc | ||
.jshintrc | ||
.travis.yml | ||
CONTRIBUTING.md | ||
MIT-LICENSE.TXT | ||
package.json | ||
README.md |
Inliner
Turns your web page to a single HTML file with everything inlined - perfect for appcache manifests on mobile devices that you want to reduce those http requests.
What it does
- Get a list of all the assets required to drive the page: CSS, JavaScript, images and images used in CSS
- Minify JavaScript (via uglify-js)
- Strips white from CSS
- Base64 encode images
- Puts everything back together as a single HTML file with a simplfied doctype
Installation
Install the inliner
utility via npm:
$ npm install -g inliner
Usage
If you have either installed via npm or put the inliner bin directory in your path, then you can use inliner via the command line as per:
inliner http://remysharp.com
This will output the inlined markup with default options. You can see more options on how to disable compression or how not to base64 encode images using the help:
inliner --help
To use inline inside your own script:
var Inliner = require('inliner');
new Inliner('http://remysharp.com', function (error, html) {
// compressed and inlined HTML page
console.log(html);
});
Or:
var inliner = new Inliner('http://remysharp.com');
inliner.on('progress', function (event) {
console.error(event);
}).on('end', function (html) {
// compressed and inlined HTML page
console.log(html);
});
Once you've inlined the crap out of the page, add the manifest="self.appcache"
to the html
tag and create an empty file called self.appcache (read more).
Support
- Collapses all white space in HTML (except inside
<pre>
elements) - Strips all HTML comments
- Pulls JavaScript and CSS inline to HTML
- Compresses JavaScript via uglify (if not compressed already)
- Converts all images to based64 data urls, both inline images and CSS images
- Imports all @import rules from CSS (recusively)
- Applies media query rules (for print, tv, etc media types)
- Leaves conditional comments in place
- If JavaScript can't be imported (or is Google Analytics), source is not put inline
Limitations / Caveats
- Whitespace compression might get a little heavy handed - all whitespace is collapsed from
n
spaces to 1 space.
Filing issues & PRs
Please see the contributing for guidelines.