Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 2bdc59ad32
Fetching contributors…

Cannot retrieve contributors at this time

89 lines (75 sloc) 2.994 kb

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.

Jump to Line
Something went wrong with that request. Please try again.