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

Обрабатываем 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'е :)