Node.js + Express.js。如何减少 css 的渲染？

Question

我无法在我的快速工作区中呈现更少的 CSS。
这是我当前的配置（我的 css/less 文件在 'public/stylo/'）：

app.configure(function()
{
    app.set('views'      , __dirname + '/views'         );
    app.set('partials'   , __dirname + '/views/partials');
    app.set('view engine', 'jade'                       );
    app.use(express.bodyDecoder()   );
    app.use(express.methodOverride());
    app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']}));
    app.use(app.router);
    app.use(express.staticProvider(__dirname + '/public'));
});

这是我的 ma​​in.jade 文件：

!!!
html(lang="en")
     head
         title Yea a title
         link(rel="stylesheet", type="text/css", href="/stylo/main.less")
         link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif")
         script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js")
         script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js")
     body!= body

这是我的 ma​​in.less css：

@import "goodies.css";

body 
{
    .googleFont;
    background-color     :  #000000;
    padding              :  20px;
    margin               :  0px;

    > .header
    {
        border-bottom    :  1px solid #BBB;
        background-color :  #f0f0f0;
        margin           :  -25px -25px 30px -25px; /* important */
        color            :  #333;
        padding          :  15px;
        font-size        :  18pt;
    }
}

这是我的 goodies.less css：

.rounded_corners(@radius: 10px)
{    
    -moz-border-radius   :  @radius;
    -webkit-border-radius:  @radius;
    border-radius        :  @radius;
}
.shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999)
{
    -webkit-box-shadow   :  @rad1 @rad2 @rad3 @color;
    -moz-box-shadow      :  @rad1 @rad2 @rad3 @color;
    box-shadow           :  @rad1 @rad2 @rad3 @color;
}
.gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec)
{
    background-image     :  -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2));
    background-image     :  -moz-linear-gradient(@color1, @color2);
}
.googleFont
{
    font-family          :  'Droid Serif';
}

很酷的交易。现在：我通过 npm 安装了 less，我从另一篇帖子中听说 @imports 应该引用 .css 而不是 .less。无论如何，我已经尝试了将.less 切换为翡翠中的.css 的组合，但没有成功。

如果您能提供帮助或有解决方案，我将不胜感激。

注意：如果我输入任何 ol'.css，jade 部分可以正常工作。
注意 2： 如果我通过命令行使用 lessc，则 less 编译。

Answer 1

天哪，这些东西在路径的工作方式上非常不一致，但是我发现了如何让它工作。

第一个问题是你的路径，compiler 和staticProvider，编译器需要使用/public，并且会挂接到下面的所有请求。如果您不这样做，编译器将尝试使用类似/public/stylo/stylo 的路径。

第二个问题在于 main.less 文件中的 @import 以及 less 编译器很愚蠢并且不处理相对导入这一事实。

在您的main.less 中使用@import "/public/stylo/goodies.css"; 即可。

针对 less:
https://github.com/cloudhead/less.js/issues/issue/177 的相对路径问题提交了一个错误

Answer 2

问题是编译器只有在文件的 mtime 改变时才编译文件。

假设你有：

// A.less
@import "B.css";

和

// B.less
body {
  background: #f00;
}

我现在修改B.less，A不会重新编译！

几个月以来我有一个拉取请求等待，你可以使用我的 fork 编译器而不是主编译器。

https://github.com/senchalabs/connect/pull/167

Answer 3

两个可以让你的生活更轻松的项目

1. Buildr: The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)

2. Less4Clients: Express.js extension to render LessCSS (.less) files server-side :)

Answer 4

如果你想缩小输出的 css，我发现内置编译器（来自连接模块）缺少压缩选项。因此，与其为它编写我自己的中间件编译器。我在我的应用程序中覆盖了 connect less 编译器。

var express = require('express');
var app = express.createServer();
var less;

express.compiler.compilers.less.compile = function (str, fn) {
    if (!less) less = require("less");                                                      
    try {
        less.render(str, { compress : true }, fn);
    } catch (err) {
        fn(err);
    }
};

app.use(express.compiler({ src: publicdir, enable: ['less'] }));

Answer 5

我发布了一个package on GitHub called node-kickstart-example，它使用了一个方便的预配置快递，启用了翡翠模板渲染和更少的样式表处理。使用 npm 安装 kickstart，将您的翡翠模板放在 views/ 中，将您的 less 文件放在 assets/styles/ 中，一切顺利……

kickstart 中包含了 Matt Sain 使用 less 和 express 生成压缩 css 文件的解决方案。