Node.js + Express.js. Wie weniger CSS zu machen?

Question

Ich bin nicht in der Lage weniger CSS in meinem ausdrücklichen Arbeitsplatz zu machen.
Hier ist meine aktuelle Konfiguration (mein css / weniger Dateien sind in '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'));
});

Hier ist meine main.jade Datei :

!!!
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

hier ist mein main.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;
    }
}

Und hier ist mein 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';
}

Cool Deal. Jetzt: Ich habe weniger installiert über npm und ich hatte von einem anderen Beitrag gehört, dass @imports die .css Referenz sollte nicht der .less. Auf jeden Fall habe ich die Kombinationen der Schalt .less für .css in der Jade und weniger Dateien ohne Erfolg versucht.

Wenn Sie die Lösung helfen oder haben kann, würde ich es sehr schätzen.

Hinweis: Der Jade Teil funktioniert gut, wenn ich irgendein ol‘.css eingeben
. Hinweis 2:. Die weniger compiliert, wenn ich lessc über Befehlszeile

Answer 1

Meine Güte, das Zeug ist sehr widersprüchlich, wie die Wege der Arbeit, aber ich fand heraus, wie Sie es an die Arbeit bekommen können.

Das erste Problem ist mit Wegen, sowohl compiler und staticProvider, Compiler Bedürfnissen Nutzung /public und wird im Folgenden, dass in alle Anfragen Haken. Wenn Sie das nicht tun, versucht der Compiler den Pfad so /public/stylo/stylo zu verwenden.

Das zweite Problem liegt bei dem @import in main.less Datei und die Tatsache, dass weniger Compiler dumm sind und behandelt nicht relativ Importe.

Mit @import "/public/stylo/goodies.css"; in Ihrem main.less wird es Arbeit machen.

Abgelegt einen Bug für den relativen Pfad Problem mit less:
https://github.com/cloudhead/less.js/issues/issue/177

Answer 2

Wenn Sie die ausgegebenen css minify wollen, fand ich, dass der Compiler gebaut (aus dem Verbindungsmodul) wurde die Kompresse Option fehlt. Anstatt also meine eigenen Middleware-Compiler für sie zu schreiben. Ich überschrieb die connect weniger Compiler in meiner app.

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 3

Das Problem ist, dass der Compiler kompiliert die Datei nur, wenn sein mtime geändert wird.

Nehmen wir an Sie haben:

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

und

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

ich mich ändere jetzt B.less, A nicht neu kompiliert werden!

Ich habe eine Bitte warten Pull seit Monaten, Sie meine Gabel Compiler ein anstelle des Master verwenden können.

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

Answer 4

Zwei Projekte, die das Leben leichter machen könnte

1. Buildr: Die (Java | Coffee) Script und (CSS | weniger) (Builder | Bündler | Packer | Minifier | Merger | Checker)

2. Less4Clients: Express.js Erweiterung LessCSS (.Weniger) Dateien serverseitige zu machen :)

Answer 5

Ich habe ein Paket auf GitHub veröffentlicht gerufenen Knoten-Kickstart--Beispiel welche Anwendungen ein handliches vorkonfigurierte Express mit aktiviertem Jade Vorlage Rendering und weniger Sheet-Verarbeitung. Verwenden npm installieren Kickstart- , platzieren Sie Ihre Jade-Vorlagen in views/ und Ihre weniger Dateien in assets/styles/ und Ihre guten zu gehen ...

Lösung Matt Sain zur Erzeugung von Druck CSS-Dateien mit weniger und Express ist in enthalten in Kickstart- .