Node.js + Express.js. Come rendere meno css?

Question

Sono in grado di rendere meno css nel mio lavoro espresso.
Qui è la mia configurazione attuale (il mio css / meno file sono in 'pubblico / 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'));
});

Ecco il mio file main.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

ecco la mia 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;
    }
}

E qui è il mio 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 affare. Ora: Ho installato meno tramite NPM e che avevo sentito da un altro post che @imports dovrebbero fare riferimento al non .css il .less. In ogni caso, ho provato il combinazioni di commutazione .less per .css in giada e meno file senza successo.

Se si può aiutare o avere la soluzione sarei molto grato.

Nota: La porzione di giada funziona bene se entro qualsiasi ol' .css
. Nota 2:. I meno compila se uso lessc tramite linea di comando

Answer 1

Accidenti, quella roba è molto incoerente nel modo in cui i percorsi di lavoro, però ho scoperto come si può ottenere al lavoro.

Il primo problema è con i tuoi percorsi, sia compiler e staticProvider, esigenze compilatore di utilizzare /public ed è la volontà di agganciare in tutte le richieste di sotto di tale. Se non lo fai, il compilatore tenterà di utilizzare un percorso come /public/stylo/stylo.

Il secondo bugie problema con il @import nel file di main.less e il fatto che meno del compilatore è stupido e non gestisce le importazioni relative.

Utilizzando @import "/public/stylo/goodies.css"; nella vostra main.less renderà il lavoro.

Archiviato un Bug per il rilascio percorso relativo con less:
https://github.com/cloudhead/less.js/issues/issue/177

Answer 2

Se si vuole minify css emesso, ho scoperto che il costruito nel compilatore (dal modulo di connessione) mancava l'opzione di compressione. Quindi, piuttosto che scrivere il mio compilatore middleware per esso. Ho sovrascritto il collegamento compilatore meno nella mia 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

Il problema è che il compilatore compila solo il file se mtime è cambiato.

Diciamo che avere:

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

e

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

Ora modifico B.less, A non verrà ricompilato!

Ho un pull richiesta di attesa dal momento mesi, è possibile utilizzare il mio compilatore forchetta invece del maestro unico.

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

Answer 4

Due progetti che potrebbero rendere la vita più facile

1. Buildr: The (Java | Caffè) Script e (CSS | Meno) (Builder | Bundler | Packer | Minifier | fusione | Checker)

2. Less4Clients: Express.js estensione rendere LessCSS (.less) file server-side :)

Answer 5

Ho pubblicato un pacchetto di href="http://github.com/semu/node-kickstart-example" su GitHub chiamato nodo-kickstart-esempio quali usi un pratico espresso pre-configurato con abilitato il rendering modello di giada e meno elaborazione foglio di stile. Utilizzare npm installare kickstart , inserire i tuoi modelli di giada in views/ e le vostre meno file in assets/styles/ e la vostra buona andare ...

La soluzione di Matt Sain per la generazione di file CSS compressi con meno ed esplicita è in incluso nella kickstart .