connect-assetmanager-handlers

Post and pre hooks for connect-assetmanager.

connect-assetmanager-handlers

Post and pre hooks for connect-assetmanager

Via npm:

$ npm install connect-assetmanager-handlers
var assetManager = require('connect-assetmanager');
var assetHandler = require('connect-assetmanager-handlers');
var assets = assetManager({
    'css': {
        'route': /\/static\/css\/[0-9]+\/.*\.css/
        , 'path': './public/css/'
        , 'dataType': 'css'
        , 'files': [
            'reset.css'
            , 'client.css'
        ]
        , 'preManipulate': {
            '^': [
                assetHandler.fixVendorPrefixes
                , assetHandler.fixGradients
                , assetHandler.replaceImageRefToBase64(root)
            ]
        }
    }
    'js': {
        'route': /\/static\/js\/[0-9]+\/.*\.js/
        , 'path': './public/js/'
        , 'dataType': 'javascript'
        , 'files': [
            'jquery.js'
            , 'jquery.client.js'
        ]
        , 'postManipulate': {
            '^': [
                assetHandler.uglifyJsOptimize
            ]
        }
    }
});

Uses UglifyJS to compress the give javascript files.

Uses YUI Compressor to compress the given javascript files.

Uses YUI Compressor to compress the given CSS files.

Replaces -vendor with multiple versions of the same line for most vendor prefixes.

-vendor-border-radius: 5px;

Turns into:

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;

Enables easy use of top to bottom gradients cross browser.

gradient: rgba(255,255,255,1)_rgba(255,255,255,0.6);

Turns into:

background: rgba(255,255,255,1);
background: -webkit-gradient(linear,0% 0,0% 100%,from(rgba(255,255,255,1)),to(rgba(255,255,255,0.6)));
background: -moz-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0.6));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffffff',EndColorStr='#99ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffffff', EndColorStr='#99ffffff')";

Looks for data-url(filepath/file.png) in the CSS and replaces those with the contents of the image, base64 encoded.

assetHandler.replaceImageRefToBase64(__dirname + '/public')

Simply replaces data-url with url. Used as a complement with replaceImageRefToBase64 if you want to serve a css to IE6-7.

Finds all blocks containing floats and add a display: inline; (unless there is another display set in that block) to fix double margin bugs.