Установка и использование Recess на сервере Ubuntu 12.04

Java, Ubuntu | Amber | Комментировать запись

Что такое Recess?

Recess – это анализатор кода на основе LESS, разработанный командой Twitter, предназначенный для создания более качественных css. Анализатор Recess можно использовать в процессе разработки, чтобы сделать код более чистым и обслуживаемым.

В этом руководстве речь пойдёт об установке Recess на сервер Ubuntu 12.04.

Примечание: Для выполнения руководства нужно предварительно настроить сервер и установить Node.js и NPM (инструкции по установке этих программ можно найти здесь).

Установка Recess

Выполнив все предварительные требования, запустите следующую команду для установки Recess:

npm install recess -g

Использование Recess

Итак, как же работает этот анализатор кода? При написании файлов css нужно учитывать некоторые стандартные правила. К примеру, в селекторах нельзя использовать #ids. Конфигурации Recess содержат все эти правила, благодаря чему Recess может проверять css-файлы.

Свежая установка Recess поставляется с такими правилами:

• noIDs (не позволяет стилизовать ID как #foo);
• noJSPrefix (не разрешает имена классов с префиксами .js);
• noOverqualifying (не позволяет переопределять селекторы, например div#foo.bar);
• noUnderscores (запрещает использовать символ подчёркивания в названиях классов: .my_class);
• noUniversalSelectors (запрещает использовать универсальный селектор*);
• zeroUnits (запрещает добавлять модули к значению 0: 0px);
• strictPropertyOrder (обеспечивает  соблюдение строгого порядка; подробнее об этом можно прочесть здесь).

Для примера создайте простой css-файл и внесите в него такой код:

#my-id {
color:red;
}
.my_bad_class {
color:red;
}

Сохраните и закройте файл. Затем запустите в терминале такую команду:

recess path/to/css/file.css

Эта команда проверит файл и сообщит о проблемах. В только что созданном файле нарушено два правила, о чём и должен сообщить Recess. Чтобы Recess проверил все файлы в папке, запустите команду:

recess path/to/css/folder/*

К примеру, сейчас в файле css нужно использовать #ids, но при этом Recess не должен отмечать их как ошибки. Для этого существует команда:

recess path/to/css/file.css --noIDs false

Эта команда передаёт данному правилу опцию false. Это также работает и для других правил, к примеру:

recess path/to/css/file.css --noIDs false --noUnderscores false

Теперь Recess сообщит, что тестовый файл не содержит никаких ошибок, поскольку все нарушенные в нём правила отключены.

Допустим, эти правила нужно отключить навсегда; отключать их вручную при помощи вышеприведённой команды не очень удобно. В таком случае нужно создать конфигурационный файл .recessrc, который можно разместить:

• В папке, из которой запускается команда recess. В данном случае нужно просто запустить эту команду без аргументов, и она создаст необходимый файл.
• В другой папке; для этого нужно в качестве опции задать команде recess путь к конфигурационному файлу, к примеру:

recess path/to/css/file.css --config=path/to/config/.recessrc

Содержимое созданного файла зависит от правил, которые нужно отключить. К примеру, чтобы отключить noIDs и noUnderscores, нужно внести в файл:

{
"noIDs": false,
"noUnderscores": false
}

Кроме того, Recess можно использовать для компилирования файлов css (или LESS) и автоматического внесения изменений. Например, если свойства заданы в неправильном порядке, Recess может скомпилировать файл и вернуть в терминал исправленный css-файл с правильным порядком свойств. Для этого просто используйте опцию –compile:

recess path/to/css/file.css –compile

Теперь Recess не может исправлять всех ошибок, но он уберёт лишние пробелы, уберет модули от значений 0 и исправит порядок свойств. Чтобы автоматически сохранить результат, используйте следующую команду:

recess path/to/css/file.css --compile > path/to/css/compiled-file.css

Помните о том, что после запуска этой команды результат последней компиляции Recess первого файла в команде будет замещать предыдущее содержимое второго css-файла.