jade
Version:
Jade template engine
55 lines (40 loc) • 1.9 kB
Markdown
## Connect Middleware
Stylus ships with Connect middleware for auto-compiling Stylus sheets when modified.
## stylus.middleware(options)
Return Connect middleware with the given `options`.
#### Options
`force` When __true__ styles will always re-compile
`src` Source directory used to find .styl files
`dest` Destination directory used to output .css files
when undefined defaults to `src`.
`compress` Whether the output .css files should be compressed
`compile` Custom compile function, accepting the arguments
`(str, path)` returning the renderer.
#### Examples
Here we set up the custom compile function so that we may
alter the renderer by providing additional settings.
By default the compile function simply sets the `filename`
and renders the CSS.
function compile(str, path) {
return stylus(str)
.import(__dirname + '/css/mixins/blueprint')
.import(__dirname + '/css/mixins/css3')
.set('filename', path)
.set('warn', true)
.set('compress', true);
}
Pass the middleware to Connect, grabbing .styl files from this directory
and saving .css files to _./public_. Also supplying our custom `compile` function.
Following that we have a `staticProvider` layer setup to serve the .css
files generated by Stylus.
var stylus = require('stylus');
var server = connect.createServer(
stylus.middleware({
src: __dirname
, dest: __dirname + '/public'
, compile: compile
})
, connect.staticProvider(__dirname + '/public')
);
When `force` is used, the styles will be unconditionally re-compiled, however
even without this option the Stylus middleware is smart enough to detect changes in `@import`ed files.