packagify-html

packagify

Packagify HTML into a single http request by inlining all the linked assets (CSS, JS).

Packagify will attempt to turn resources and references to external stylesheets, scripts and images.

The module attempts to fetch resource, whether that be off disk, or from a remote server, and then squash the resources using a css minification and a js uglifier.

It will then attempt to stuff them inline, so for example:

<script type="text/javascript" src="/path/to/file.js"></script>
<script type="text/javascript" src="http://somehost/path/to/file.js"></script>

would become

<script type="text/javascript">alert('minified resources!');</script>
<script type="text/javascript">(function() {alert('some other resources!');})(window);</script>

and

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="//otherhost/screen.css">

would become

<style type="text/css">body:after{content:'i have also been shrunk';}*{font-family:'Comic Sans MS'}</style>
<style type="text/css">ul{float:left;}*:before{content:'etc';}</style>

usage

pipe data

Example usage can be shown by running

# this will just parse test/test.html and pipe to stdout
node test/test.js

The methods exposed by packagify-html are.

// returns a stream which will parse the input and stream the output out
pkg( inputfile, /* optional options */ )

// create a file readStream and pipe to the pkg method and return the stream
pkgFile( inputfile, /* optional options */ )

// create read stream and pipe to stdout, returning the stream
pkgSync( inputfile, /* optional options */ )

// create a read and write stream to the fs 
pkgWrite( inputfile, /* optional options */, output )

Options are always optional

var packagify 	= require('packagify-html');
var fs 			= require('fs');

var filename = __dirname + '/test.html';

// basic usage of packagify.pkg( filename, opts );
fs.createReadStream( filename ).pipe( packagify.pkg( filename, opts ) ).pipe( process.stdout );

// shorthand
packagify.pkgFile( filename, opts ).pipe( process.stdout );

// this will create a stream of data for the file and pipe it directly to stdout
packagify.pkgSync( filename, opts );

// write out the squished file to the dest
packagify.pkgWrite( filename, opts, __dirname + '/mini.html' );
// or
packagify.pkgWrite( filename, __dirname + '/mini.html' );

or even as middleware in a server.

var clienthtml = __dirname + '/../client/index.html';

var server = require('http').createServer(function( req, res ) {
	var file = fs.createReadStream( clienthtml );

	file.pipe( packagify.pkg( clienthtml ).pipe( res );
}).listen(9001);

from the terminal

cat input.html | packagify > output.html

packagify input.html -scgum

options

Options can be passed to the pkg methods

// packagify-html opts
var opts = {
	scripts: true/false, 	/// (default: true) package scripts
	styles: true/false, 	/// (default: true)	package styles
	uglify: true/false, 	/// (default: true) uglify packaged scripts
	minifyCss: true/false, 	/// (default: true)	minify packaged styles
	images: true/false, 	/// (default: true) package images
	external: true/false 	/// (default: false) only scrape external resources
};
// minification opts
var opts = {
	uglify: true/false,
	minifyCss: true/false
};
// or
var opts = {
	uglify: {
		options: 'value'
	},
	minifyCss: {
		options: 'value'
	}
};

• Minification of the css is completed using clean-css and the options are available here

• Uglification of the JS uses uglify-js and the options are here

TODO

• Improve logging, so that we produce a debug.log, since stdout could be used to make the destination file.