美文网首页前端开发那些事儿
Stylus预处理器简介(二十五)连接中间件

Stylus预处理器简介(二十五)连接中间件

作者: 曲昶光 | 来源:发表于2021-08-07 19:50 被阅读0次

连接中间件

Stylus附带了Connect中间件,用于在Stylus表被修改时自动编译它们。

stylus.middleware(options)

Options

返回带有给定选项的Connect middleware。

`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提供.style文件:

var app = connect();

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

改变src和dest选项来改变. style文件的加载位置和保存位置:

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

这里我们设置了自定义的compile函数,以便可以设置compress选项,或者定义其他函数。
默认情况下,compile函数只是设置文件名并呈现CSS。在下面的例子中,我们使用“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
 })

相关文章

网友评论

    本文标题:Stylus预处理器简介(二十五)连接中间件

    本文链接:https://www.haomeiwen.com/subject/qydomltx.html