2011-03-14 05:22:59 +03:00
# 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.
2015-07-28 00:40:34 +03:00
[![Build Status ](https://travis-ci.org/remy/inliner.svg )](https://travis-ci.org/remy/inliner)
2011-03-14 05:22:59 +03:00
## What it does
2015-09-22 00:53:48 +03:00
- Get a list of all the assets required to drive the page: CSS, JavaScript, images, videos and images used in CSS
2011-03-14 05:22:59 +03:00
- Minify JavaScript (via [uglify-js ](https://github.com/mishoo/UglifyJS "mishoo/UglifyJS - GitHub" ))
- Strips white from CSS
2015-09-22 00:53:48 +03:00
- Base64 encode images and videos
2011-03-14 05:22:59 +03:00
- Puts everything back together as a single HTML file with a simplfied doctype
2011-03-14 15:57:35 +03:00
## Installation
2015-07-28 00:46:04 +03:00
Install the `inliner` utility via [npm ](http://npmjs.org ):
2011-03-14 15:57:35 +03:00
2015-07-27 16:54:46 +03:00
$ npm install -g inliner
2011-03-14 05:22:59 +03:00
## Usage
2011-06-11 15:49:51 +04:00
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:
2011-03-14 16:09:21 +03:00
inliner http://remysharp.com
2011-06-11 15:49:51 +04:00
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:
2011-03-14 16:09:21 +03:00
2011-06-11 15:49:51 +04:00
inliner --help
2011-03-14 16:09:21 +03:00
2011-06-11 15:49:51 +04:00
To use inline inside your own script:
2011-03-14 16:16:23 +03:00
2011-06-11 15:49:51 +04:00
var Inliner = require('inliner');
2011-03-14 05:22:59 +03:00
2015-07-28 00:46:04 +03:00
new Inliner('http://remysharp.com', function (error, html) {
2011-03-14 16:09:21 +03:00
// compressed and inlined HTML page
console.log(html);
});
2015-07-27 16:54:46 +03:00
2011-06-11 15:49:51 +04:00
Or:
2015-07-27 16:54:46 +03:00
2011-06-11 15:49:51 +04:00
var inliner = new Inliner('http://remysharp.com');
2015-07-27 16:54:46 +03:00
2011-06-11 15:49:51 +04:00
inliner.on('progress', function (event) {
console.error(event);
}).on('end', function (html) {
// compressed and inlined HTML page
2015-07-27 16:54:46 +03:00
console.log(html);
2011-06-11 15:49:51 +04:00
});
2011-03-14 05:22:59 +03:00
2011-03-16 14:02:57 +03:00
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](http://remysharp.com/2011/01/31/simple-offline-application/)).
2011-03-14 05:22:59 +03:00
2011-05-19 16:45:56 +04:00
## Support
2011-06-11 15:56:58 +04:00
- Collapses all white space in HTML (except inside `<pre>` elements)
2011-05-19 16:45:56 +04:00
- Strips all HTML comments
- Pulls JavaScript and CSS inline to HTML
- Compresses JavaScript via uglify (if not compressed already)
2015-09-22 00:53:48 +03:00
- Converts all images and videos to based64 data urls, inline images, video poster images and CSS images
2011-05-19 16:45:56 +04:00
- 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
2011-03-14 05:22:59 +03:00
## Limitations / Caveats
2015-07-28 12:19:26 +03:00
- Whitespace compression might get a little heavy handed - all whitespace is collapsed from `n` spaces to 1 space.
## Filing issues & PRs
2015-11-26 22:55:00 +03:00
Please see the [contributing ](https://github.com/remy/inliner/blob/master/CONTRIBUTING.md ) for guidelines.