Node.js + Express.js.Как РЕНДЕР меньше CSS? - PullRequest
Новая
       68

Node.js + Express.js.Как РЕНДЕР меньше CSS?

17 голосов
/ 06 января 2011

Я не могу отобразить меньше 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'));
});

Вот мой файл 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

Вот мой файл 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;
    }
}

И вот мой 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 , и я слышал из другого поста, что @imports должен ссылаться на .css, а не .less.В любом случае, я пробовал комбинаций переключения .less для .css в нефрите и меньше файлов, но безуспешно.

Если вы можете помочь или иметь решение, я был бы очень признателен.

Примечание: Нефритовая часть работает нормально, если я ввожу любые значения .css.
Примечание2: Чем меньше компилируется, если я использую lessc через командную строку.

Ответы [ 5 ]

16 голосов
/ 08 января 2011

Черт возьми, эти вещи очень противоречивы в том, как работают пути, однако я узнал, как можно заставить их работать.

Первая проблема связана с вашими путями, compiler и staticProvider, компилятор должен использовать /public и будет подключаться ко всем запросам ниже этого.Если вы этого не сделаете, компилятор попытается использовать путь типа /public/stylo/stylo.

Вторая проблема связана с файлом @import in main.less и тем фактом, что меньший компилятор глуп ине обрабатывает относительный импорт.

Использование @import "/public/stylo/goodies.css"; в вашем main.less заставит его работать.

Отправил ошибку для проблемы относительного пути с помощью less:
https://github.com/cloudhead/less.js/issues/issue/177

3 голосов
/ 05 декабря 2011

Если вы хотите минимизировать выводимый css, я обнаружил, что во встроенном компиляторе (из модуля connect) отсутствует опция сжатия. Так что вместо того, чтобы писать свой собственный компилятор промежуточного программного обеспечения для него. Я переписал компилятор без подключения в моем приложении. 

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'] }));
1 голос
/ 10 января 2011

Проблема в том, что компилятор компилирует файл только при изменении его mtime.

Допустим, у вас есть: 

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

и 

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

Iтеперь я изменяю B.less, A не будет перекомпилироваться!

У меня есть запрос на получение, ожидающий месяцами, вы можете использовать мой компилятор вилки вместо основного.

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

0 голосов
/ 17 декабря 2011

Я опубликовал пакет на GitHub под названием node-kickstart-example , в котором используется удобный предварительно сконфигурированный экспресс с включенным рендерингом нефритовых шаблонов и меньшей обработкой таблиц стилей.Используйте npm для установки kickstart , поместите ваши шаблоны Jade в views/ и ваши файлы поменьше в assets/styles/ и все готово…

Решение Matt Sain для создания сжатых файлов CSS с меньшими экспресс включен в кикстарт .

0 голосов
/ 20 июля 2011
...