node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

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.