Меньше и автоматическое кеширование CSS - PullRequest
Новая
       19

Меньше и автоматическое кеширование CSS

2 голосов
/ 27 января 2012

Я заинтересован в использовании препроцессора CSS и склоняюсь к МЕНЬШЕ.Я сам умею писать CSS, но хочу воспользоваться некоторыми из динамических функций.Я не уверен, что добавление постоянных дополнительных шагов в производство (например, компиляция) стоит выгоды.

Мне нравится LESS, поскольку я могу использовать less.js для компиляции на стороне клиента (только во время разработки)хотя есть инструмент, который бы автоматически определял метку времени в моем файле less и компилировал ее в css и перезаписывал текущий файл css?Мне бы хотелось достичь такого уровня прозрачности, чтобы я мог беспокоиться о коде и меньше о его компиляции и обновлении ... Что-то похожее на http://cssrefresh.frebsite.nl/, но объединение с ним компилятора?Если нет Кто-нибудь заинтересован в помощи в его создании?

Ответы [ 3 ]

2 голосов
/ 27 января 2012

Эта простая функция делает это: 

less.autoRefresh = function(time)
{
    var sheets = [];
    for(var i = less.sheets.length; i--; )
        sheets.push(less.sheets[i].href);
    setInterval(
        function() 
        {
            for(var i = sheets.length; i--; )
                less.sheets[i].href = sheets[i] + '?'+Math.random();

            less.refresh(1);
        }, 
        time || 1000
    );

    var fnImport = less.tree.Import;
    less.tree.Import = function(path, imports)
    {
        path.value += '?x='+Math.random();
        fnImport(path, imports);
    }
}
less.autoRefresh(2000);

Обновляет каждые 2000 мс меньше файлов. Он не проверяет заголовки и т. Д ... но должен делать это в dev env.

2 голосов
/ 27 января 2012

Less.js уже перекомпилируется, если источник изменился - у меня никогда не было проблем с его устареванием во время разработки. В конечном итоге я переключился на рабочий процесс «скомпилировать при сохранении», используя меньший пакет textmate, хотя переключение тегов ссылок перед развертыванием и тестированием становилось раздражающим.

При этом я уверен, что вы могли бы подключить что-нибудь, чтобы посмотреть файл на диске и вызвать компилятор node.js lessc.

ОБНОВЛЕНИЕ, ЧТОБЫ УТОЧНИТЬ ЦИКЛ DEV:

Во время разработки я включаю файл less.js на страницу и делаю ссылку на мой styles.less файл через <link rel="stylesheet/less" type="text/css" href="styles.less>

Когда я отправляюсь в производство, я изменяю это на:

<link rel="stylesheet" type="text/css" href="styles.css">

Но во время разработки каждый раз, когда я сохраняю файл styles.less, я использую пакет TextMate, чтобы также скомпилировать файл styles.css, поэтому изменение заключается в комментировании / раскомментировании в моем исходном файле. 1018 *

У меня есть комплект для использования компилятора less.js lessc с набором --compress, поэтому он дает вам хорошую компактную таблицу стилей.

0 голосов
/ 27 января 2012

Существует SimpLess (бесплатно, доступно для Linux, Mac, Windows), я сам не использовал его, но я надеюсь в ближайшее время интегрировать его с моим рабочим процессом .

...