connect-assetmanager-handlers

Post and pre hooks for connect-assetmanager

Installation

Via npm:

$ npm install connect-assetmanager-handlers

Usage

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
            ]
        }
    }
});

Handlers

uglifyJsOptimize

Uses UglifyJS to compress the give javascript files.

yuiJsOptimize

Uses YUI Compressor to compress the given javascript files.

yuiCssOptimize

Uses YUI Compressor to compress the given CSS files.

fixVendorPrefixes

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

Example

-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;

fixGradients

Enables easy use of top to bottom gradients cross browser.

Example

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')";

replaceImageRefToBase64

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

Setup

assetHandler.replaceImageRefToBase64(__dirname + '/public')

stripDataUrlsPrefix

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

fixFloatDoubleMargin

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