eschan / less.js-middleware

Connect Middleware for LESS.js compiling

Installation

sudo npm install less-middleware

Options

Option	Description	Default
force	Always re-compile less files on each request.	false
once	Only check for need to recompile once after each server restart. Useful for reducing disk i/o on production.	false
debug	Output any debugging messages to the console.	false
src	Source directory containing the .less files. Required.
dest	Desitnation directory to output the compiled .css files.	<src>
prefix	Path which should be stripped from the public pathname.
compress	Compress the output being written to the *.css files. When set to 'auto' compression will only happen when the css file ends with .min.css or -min.css.	auto
optimization	Desired level of LESS optimization. Optionally 0, 1, or 2	0

Examples

Connect

var lessMiddleware = require('less-middleware');

var server = connect.createServer(
    lessMiddleware({
        src: __dirname + '/public',
        compress: true
    }),
    connect.staticProvider(__dirname + '/public')
);

Express

var lessMiddleware = require('less-middleware');

var app = express.createServer();

app.configure(function () {
    // Other configuration here...

    app.use(lessMiddleware({
        src: __dirname + '/public',
        compress: true
    }));

    app.use(express.static(__dirname + '/public'));
});

Express - Different src and dest

When using a different src and dest you can use the prefix option to make the directory structure cleaner.

Requests for static assets (like stylesheets) made to the express server use a pathname to look up the file. So if the request is for http://localhost/stylesheets/styles.css the pathname will be /stylesheets/styles.css.

The less middleware uses that path to determine where to look for less files. In the original example it looks for the less file at /public/stylesheets/styles.less and compiles it to /public/stylesheets/styles.css.

If you are using a different src and dest options it causes for more complex directories structures unless you use the prefix option. For example, without the prefix, and with a src of /src/less and a dest of /public it would look for the less file at /src/less/stylesheets/styles.less and compile it to /public/stylesheets/styles.css. To make it cleaner you can use the prefix option:

var lessMiddleware = require('less-middleware');

var app = express.createServer();

app.configure(function () {
    // Other configuration here...

    app.use(lessMiddleware({
        dest: __dirname + '/public/stylesheets',
        src: __dirname + '/src/less',
        prefix: '/stylesheets',
        compress: true
    }));

    app.use(express.static(__dirname + '/public'));
});

Using the prefix it changes the pathname from /stylesheets/styles.css to /styles.css. With that prefix removed from the pathname it makes things cleaner. With the prefix removed it would look for the less file at /src/less/styles.less and compile it to /public/stylesheets/styles.css.