Connect 中间件

Stylus 提供了 Connect 中间件，用于在文件被修改时自动编译 Stylus 样式表。

stylus.middleware(options)

选项

使用给定的 options 返回 Connect 中间件。

bash

`serve`     从 `dest` 提供 Stylus 文件 [true]
`force`     总是重新编译
`src`       用于查找 .styl 文件的源目录
`dest`      用于输出 .css 文件的目标目录
            当未定义时默认为 `src`。
`compile`   自定义编译函数，接受参数
            `(str, path)`。
`compress`  输出的 .css 文件是否应该被压缩
`firebug`   在生成的 css 中发出调试信息，
            可以被 FireStylus Firebug 插件使用
`linenos`   在生成的 css 中发出注释，指示
            对应的 Stylus 行
`sourcemap` 以 sourcemaps v3 格式生成源映射

`serve`     从 `dest` 提供 Stylus 文件 [true]
`force`     总是重新编译
`src`       用于查找 .styl 文件的源目录
`dest`      用于输出 .css 文件的目标目录
            当未定义时默认为 `src`。
`compile`   自定义编译函数，接受参数
            `(str, path)`。
`compress`  输出的 .css 文件是否应该被压缩
`firebug`   在生成的 css 中发出调试信息，
            可以被 FireStylus Firebug 插件使用
`linenos`   在生成的 css 中发出注释，指示
            对应的 Stylus 行
`sourcemap` 以 sourcemaps v3 格式生成源映射

示例

从 ./public 提供 .styl 文件：

var app = connect();

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

var app = connect();

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

更改 src 和 dest 选项以更改 .styl 文件的加载和保存位置：

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
})

Connect 中间件 ​

stylus.middleware(options) ​

选项 ​

示例 ​

Connect 中间件

stylus.middleware(options)

选项

示例