connect-assetmanager-handlers-updated

connect-assetmanager-handlers

Post and pre hooks for connect-assetmanager

What's "updated"?

This package includes fixes from @dzz0615 which updates the uglifyjs module used.

Installation

Via npm:

$ npm install connect-assetmanager-handlers-updated

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.