Skip to content
forked from remy/inliner

Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites

License

Notifications You must be signed in to change notification settings

akrymski/inliner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

Check out a working copy of the source code with Git, or install inliner via npm (the recommended way). The latter will also install inliner into the system's bin path.

$ git clone git://github.com/rem/inliner.git
$ npm install inliner -g

inliner uses a package.json to describe the dependancies, and if you install via a github clone, ensure you run npm install from the inliner directory to install the dependancies (or manually install jsdom and uglify-js).

Usage

via npm

If you installed via npm, then you can use inliner via the command line as per:

inliner http://remysharp.com

This will output the inlined markup. You can easily save this to a new file for testing:

inliner http://remysharp.com > remysharp.html

To use inline inside your script:

var inliner = require('inliner');

inliner('http://remysharp.com', function (html) {
  // compressed and inlined HTML page
  console.log(html);
});

Note that if you include the inliner script via a git submodule, it requires jsdom to be installed via npm install jsdom, otherwise you should be good to run.

I plan to include a web service at some point, but obviously this won't be able to access localhost domains.

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).

Limitations / Caveats

  • Whitespace compression might get a little heavy handed - all whitespace is collapsed from n spaces to one space.
  • Doesn't support @import rules in CSS
  • I've not tested it much (yet)! :)
  • It was written in about 2 hours or so, so the code is a little messy, sorry!

About

Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%