コンテンツにスキップ
トップに戻る
このページについて

Connectミドルウェア

Stylusには、Stylusシートが変更されるたびに自動コンパイルを行うためのConnectミドルウェアが付属しています。

stylus.middleware(options)

オプション

指定された`options`でConnectミドルウェアを返します。

`serve`     Serve the stylus files from `dest` [true]
`force`     Always re-compile
`src`       Source directory used to find .styl files
`dest`      Destination directory used to output .css files
            when undefined defaults to `src`.
`compile`   Custom compile function, accepting the arguments
            `(str, path)`.
`compress`  Whether the output .css files should be compressed
`firebug`   Emits debug infos in the generated css that can
            be used by the FireStylus Firebug plugin
`linenos`   Emits comments in the generated css indicating 
            the corresponding stylus line
`sourcemap` Generates a sourcemap in sourcemaps v3 format
`serve`     Serve the stylus files from `dest` [true]
`force`     Always re-compile
`src`       Source directory used to find .styl files
`dest`      Destination directory used to output .css files
            when undefined defaults to `src`.
`compile`   Custom compile function, accepting the arguments
            `(str, path)`.
`compress`  Whether the output .css files should be compressed
`firebug`   Emits debug infos in the generated css that can
            be used by the FireStylus Firebug plugin
`linenos`   Emits comments in the generated css indicating 
            the corresponding stylus line
`sourcemap` Generates a sourcemap in sourcemaps v3 format

./publicから.stylファイルを配信する

var app = connect();

app.middleware(__dirname + '/public');
var app = connect();

app.middleware(__dirname + '/public');

.stylファイルの読み込み元と保存先を変更するには、`src`オプションと`dest`オプションを変更します。

var app = connect();

app.middleware({
  src: __dirname + '/stylesheets',
  dest: __dirname + '/public'
});
var app = connect();

app.middleware({
  src: __dirname + '/stylesheets',
  dest: __dirname + '/public'
});

`compress`オプションを設定したり、追加の関数を定義したりできるように、ここではカスタムコンパイル関数を設定します。

デフォルトでは、コンパイル関数は単に`filename`を設定してCSSをレンダリングします。以下の例では、"nib"ライブラリプラグインを使用して出力を圧縮し、自動的にインポートしています。

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib())
    .import('nib');
}
function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib())
    .import('nib');
}

次のようにオプションとして渡します。

var app = connect();

app.middleware({
    src: __dirname
  , dest: __dirname + '/public'
  , compile: compile
})
var app = connect();

app.middleware({
    src: __dirname
  , dest: __dirname + '/public'
  , compile: compile
})