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

    packagify-htmlpublic

    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.

    install

    npm i packagify-html

    Downloadslast 7 days

    0

    version

    0.0.7

    license

    GPL

    homepage

    github.com

    last publish

    collaborators

    • avatar