Skip to content

Use syntax highlighting in readme #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Use syntax highlighting in readme #53

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 127 additions & 92 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@ Middleware for Connect (node.js) for handling your static assets.

Via [npm](http://github.com/isaacs/npm):

$ npm install connect-assetmanager
```sh
$ npm install connect-assetmanager
```

## Handy pre/post hooks

Make sure to check out [connect-assetmanager-handlers](http://github.com/mape/connect-assetmanager-handlers) for useful hooks you can use (inline base64 for image, vendor prefix fixes for example)

## What does it allow you to do?

* Merge and minify CSS/javascript files
* Auto regenerates the cache on file change so no need for restart of server or manual action.
* Run pre/post manipulation on the files
Expand All @@ -23,21 +26,25 @@ Make sure to check out [connect-assetmanager-handlers](http://github.com/mape/co
* Wildcard add files from dir

### Nifty things you can do with the pre/post manipulation

* __Replace all url(references to images) with inline base64 data which remove all would be image HTTP requests.__
* Strip all IE specific code for all other browsers.
* Fix all the vendor prefixes (-ms -moz -webkit -o) for things like border-radius instead of having to type all each and every time.

## Speed test (it does just fine)

### Running with
> connect app -n 4

### Common data

Concurrency Level: 240
Complete requests: 10000
Failed requests: 0
Write errors: 0

### Small (reset.css)

Document Path: /static/test/small
Document Length: 170 bytes

Expand All @@ -50,6 +57,7 @@ Make sure to check out [connect-assetmanager-handlers](http://github.com/mape/co
Transfer rate: 7273.84 [Kbytes/sec] received

### Larger (jQuery.js)

Document Path: /static/test/large
Document Length: 100732 bytes

Expand All @@ -62,134 +70,161 @@ Make sure to check out [connect-assetmanager-handlers](http://github.com/mape/co
Transfer rate: 91437.43 [Kbytes/sec] received

## Options

### path (string) - required

The path to the folder containing the files.

path: __dirname + '/'
```js
path: __dirname + '/'
```

### files (array) - required

An array of strings containing the filenames of all files in the group.

If you want to add all files from the path supplied add '*'. It will insert the files at the position of the *.
You can also use a regexp to match files or use external urls.
If you want to add all files from the path supplied add '*'. It will insert the files at the position of the *. You can also use a regexp to match files or use external urls.

files: ['http://code.jquery.com/jquery-latest.js', /jquery.*/ , '*', 'page.js']
```js
files: ['http://code.jquery.com/jquery-latest.js', /jquery.*/ , '*', 'page.js']
```

### route (regex as string) - required

The route that will be matched by Connect.

route: '/\/assets\/css\/.*\.css'
```js
route: '/\/assets\/css\/.*\.css'
```

### dataType (string), ['javascript', 'css']

The type of data you are trying to optimize, 'javascript' and 'css' is built into the core of the assetManager and will minify them using the appropriate code.

dataType: 'css'
```js
dataType: 'css'
```

### preManipulate (array containing functions)
There are hooks in the assetManager that allow you to programmaticly alter the source of the files you are grouping.
This can be handy for being able to use custom CSS types in the assetManager or fixing stuff like vendor prefixes in a general fashion.

'preManipulate': {
// Regexp to match user-agents including MSIE.
'MSIE': [
generalManipulation
, msieSpecificManipulation
],
// Matches all (regex start line)
'^': [
generalManipulation
, fixVendorPrefixes
, fixGradients
, replaceImageRefToBase64
]
}

There are hooks in the assetManager that allow you to programmatically alter the source of the files you are grouping. This can be handy for being able to use custom CSS types in the assetManager or fixing stuff like vendor prefixes in a general fashion.

```js
'preManipulate': {
// Regexp to match user-agents including MSIE.
'MSIE': [
generalManipulation
, msieSpecificManipulation
],
// Matches all (regex start line)
'^': [
generalManipulation
, fixVendorPrefixes
, fixGradients
, replaceImageRefToBase64
]
}
```

### postManipulate (array containing functions)

Same as preManipulate but runs after the files are merged and minified.

The functions supplied look like this:

function (file, path, index, isLast, callback) {
if (path.match(/filename\.js/)) {
callback(null, file.replace(/string/mig, 'replaceWithThis'));
} else {
callback(null, file);
}
```js
function (file, path, index, isLast, callback) {
if (path.match(/filename\.js/)) {
callback(null, file.replace(/string/mig, 'replaceWithThis'));
} else {
callback(null, file);
}
}
```

### serveModify (req, res, response, callback)

Allows you do to modify the cached response on a per request basis.

function(req, res, response, callback) {
if (externalVariable) {
// Return empty asset
response.length = 1;
response.contentBuffer = new Buffer(' ');
}
callback(response);
```js
function(req, res, response, callback) {
if (externalVariable) {
// Return empty asset
response.length = 1;
response.contentBuffer = new Buffer(' ');
}
callback(response);
}
```

### stale (boolean)

Incase you want to use the asset manager with optimal performance you can set stale to true.

This means that there are no checks for file changes and the cache will therefore not be regenerated. Recommended for deployed code.

### debug (boolean)

When debug is set to true the files will not be minified, but they will be grouped into one file and modified.

## Example usage
var sys = require('sys');
var fs = require('fs');
var Connect = require('connect');
var assetManager = require('connect-assetmanager');
var assetHandler = require('connect-assetmanager-handlers');

var root = __dirname + '/public';


var Server = module.exports = Connect.createServer();

Server.use('/',
Connect.responseTime()
, Connect.logger()
);

var assetManagerGroups = {
'js': {
'route': /\/static\/js\/[0-9]+\/.*\.js/
, 'path': './public/js/'
, 'dataType': 'javascript'
, 'files': [
'jquery.js'
, 'jquery.client.js'
]
}, 'css': {
'route': /\/static\/css\/[0-9]+\/.*\.css/
, 'path': './public/css/'
, 'dataType': 'css'
, 'files': [
'reset.css'
, 'style.css'

```js
var sys = require('sys');
var fs = require('fs');
var Connect = require('connect');
var assetManager = require('connect-assetmanager');
var assetHandler = require('connect-assetmanager-handlers');

var root = __dirname + '/public';


var Server = module.exports = Connect.createServer();

Server.use('/',
Connect.responseTime()
, Connect.logger()
);

var assetManagerGroups = {
'js': {
'route': /\/static\/js\/[0-9]+\/.*\.js/
, 'path': './public/js/'
, 'dataType': 'javascript'
, 'files': [
'jquery.js'
, 'jquery.client.js'
]
}, 'css': {
'route': /\/static\/css\/[0-9]+\/.*\.css/
, 'path': './public/css/'
, 'dataType': 'css'
, 'files': [
'reset.css'
, 'style.css'
]
, 'preManipulate': {
// Regexp to match user-agents including MSIE.
'MSIE': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.stripDataUrlsPrefix
],
// Matches all (regex start line)
'^': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.replaceImageRefToBase64(root)
]
, 'preManipulate': {
// Regexp to match user-agents including MSIE.
'MSIE': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.stripDataUrlsPrefix
],
// Matches all (regex start line)
'^': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.replaceImageRefToBase64(root)
]
}
}
};

var assetsManagerMiddleware = assetManager(assetManagerGroups);
Server.use('/'
, assetsManagerMiddleware
, Connect.static(root)
);
}
};

var assetsManagerMiddleware = assetManager(assetManagerGroups);
Server.use('/'
, assetsManagerMiddleware
, Connect.static(root)
);
```