4 марта 2012 г. LESS Linux Nginx node.js

Обрабатываем LESS "на лету" с помощью Nginx и Node.js

Сегодня начал использовать twitter-bootstrap и решил процессить less не на клиентской стороне, а средствами сервера, просто по приколу. Сразу же вспомнил про статью на хабре Серверный процессинг LESS файлов «на лету» своими руками и решил реализовать то, что там написано.

Принцип работы заключается в том, что все обращения к файлам "*.less" будут проксироваться через Nginx и преобразовываться на лету (можно и nginx-кеш прикрутить, если надо) в css средствами node.js.

Установка

Для начала нам надо установить nginx и node.js:

sudo apt-get install nginx nodejs

Скачиваем отсюда последнюю версию less.js и устанавливаем:

cd ~
wget -O adw0rd-less.js.tar.gz https://github.com/adw0rd/less.js/tarball/master
tar -xzf adw0rd-less.js.tar.gz
cd adw0rd-less.js-*

# Проверяем less
make test

Настройка

Добавим в "/etc/hosts" хост "example.loc":

127.0.0.1 example.loc

Отконфигурируем Nginx

Добавим в "/etc/nginx/nginx.conf" апстрим "lessserv":

upstream lessserv {
    server localhost:1337;
}

Отредакируем ваш server-конфиг для "example.loc" - "/etc/nginx/sites-available/example.conf":

server {
    listen 80;
    server_name example.loc;
    root /path/to/example;

    location ~* \.less$ {
        proxy_pass http://lessserv;
    }
}

После чего не забываем добавить в sites-enabled и зарелоадить Nginx:

ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/example.conf
sudo nginx -s reload

Теперь перейдем к node.js

В файле "bin/lessserv" вы можете указать нужный вам listen_host и listen_port, по умолчанию:

var listen_port = 1337,
    listen_host = "127.0.0.1";

Запускаем lessserv, который и будет проксировать наши less-файлы:

cd ~/adw0rd-less.js-*
node bin/lessserv --path=/path/to/example

Проверяем по ссылке: http://example.loc/bootstrap/less/bootstrap.less, если отдается готовый css-файл, то все у вас получилось!

Ествественно, в каталоге "/path/to/example" должен присутствовать распакованный каталог bootstrap.

Далее в html подключать можно так:

<link rel="stylesheet" type="text/css" href="http://example.loc/bootstrap/less/bootstrap.less" />

P.S. Вообщем статья это "толстый Like" статьи с хабра, хотя более подробная в плане настроек, пофикшены инструкции (proxy_pass, вместо proxy_path), а также немного улучшен "less.js" на GitHub'е :)

Комментарии

Я использую https://github.com/studentIvan/Perl-LESS-Watcher
В фоновом режиме рендерит less-файлики, не самое лучшее, но тоже решение

Оу, нашёл вот такой проект: https://github.com/marazmiki/lesscss-python
Так что можно встроить в джангу и отдавать через неё "на лету" css

ох, лишнее это все.

не надо нигде налету их рендерить, это лишняя бесполезная нагрузка + кеш проблемы и тп. гемор короче лишний.

Я стал вообще охуенным и перешел на Compass (SASS/SCSS вместо LESS - еще больше синтаксис). Под себя натсроил совместную работу Compass + Django static folder обычные.

Работаю в сорцах верстки, компилю в папку django static обычную, а дальше уже жанга манагерит готовый ксс.

Компилится все на лету с помощью LiveReload под макось.

  • няшка от Compass это autospriting ;)

Да я вообще не пользуюсь, так как не верстаю уже давно. Мне проще css поправить чем изучать что-то еще

Оставьте свой комментарий

Markdown