美文网首页前端开发那些事儿
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