В последнее время библиотеки, которые добавляют новые возможности CSS, становятся всё более популярными. Наиболее известные из них – LESS и SASS (SCSS). Какое-то время назад я пытался выбрать наиболее подходящую из них для собственных целей, но, в конечном итоге, понял, что разница минимальна и лучше потратить время на что-нибудь более полезное 🙂
Тем не менее, одно отличие между LESS и SASS всё же есть. В дистрибутиве LESS есть скрипт less.js, который преобразует .less файлы в .css прямо в браузере. Это очень удобно использовать при разработке, т.к. вам будет достаточно обновить страницу, чтобы увидеть изменения. Но для продакшена такой вариант не подходит по нескольким причинам.
Во-первых, увеличивается время загрузки страницы, т.к. посетителям будет отправляться дополнительный скрипт.
Во-вторых, на преобразование стилей уходит какое-то время, правда, less.js достаточно «умный» и кэширует стили в localStorage.
В-третьих, посетители с отключённым JavaScript вообще не увидят стилей.
Избежать всех этих проблем можно просто преобразовав файлы на сервере. В этом случае посетитель получит обычный css файл, и вообще не будет знать, что вы использовали LESS.
На официально сайте для преобразования LESS файлов предлагается использовать Node.js. Но устанавливать его только ради LESS, по-моему, перебор. Кроме того, очень удобно, когда все операции для подготовки проекта к публикации на продакшн сервере можно выполнить одной командой.
Для этих целей отлично подходит Phing о котором я раньше написал несколько статей. Пересказывать основные принципы работы с ним я не буду, вместо этого просто покажу, как создать задачу, преобразующую less-файлы в css.
Среди стандартных задач Phing подходящей вы не найдете, но существует проект My Custom Phing Tasks в который входят все необходимые библиотеки.
Установка
1. Скачайте и распакуйте архив с проектом.
2. Скопируйте папку rych (из архива phing-tasks) в папку, в которую вы установили Phing.
3. Импортируйте задачу LessCompilerTask. Для этого, добавьте в ваш build файл строку
<taskdef name="lessc" classname="phing.rych.tasks.LessCompilerTask" />
Обратите внимание, что путь к файлу указывается не через слеш, а через точку, начиная с папки в которую установлен phing. Если вы ошибётесь на этом шаге, то при запуске сборки увидите сообщение о том, что файл LessCompilerTask.php не найден.
4. Создайте задачу для сжатия файлов. Для начала рассмотрим стандартный пример из описания phing-tasks.
<target name="compile-less" description="Compile LESS to CSS">
<lessc targetdir="path/to/published/css">
<fileset dir="path/to/less/sources">
<include name="*.less" />
</fileset>
</lessc>
</target>
Как видите, для работы задачи нужно указать исходную папку, папку в которой будут размещены css файлы и шаблон для поиска less файлов. Это полностью рабочий пример, но если его немного изменить работать будет немного удобнее. Например:
<property name="LESS_DIR" value="path/to/less/sources" /> <property name="CSS_DIR" value="path/to/published/css" /><target name="compile-less" description="Compile LESS to CSS"> <lessc targetdir="${CSS_DIR}"> <fileset dir="${LESS_DIR}"> <include name="**/*.less" /> </fileset> </lessc> </target>
Здесь мы использовали два свойства LESS_DIR и CSS_DIR для того, чтобы сохранить пути к папкам и не указывать их в параметрах задачи. И изменили шаблон файла. Взгляните,
*.less – означает, что будут найдены все файлы с расширением less, которые находятся в папке, указанной в атрибуте dir тега fileset.
**/*.less – означает, что будут найдены все файлы с расширением less, которые находятся в папке, указанной в атрибуте dir тега fileset и во всех вложенных папках.
Это очень удобно, если у вас большой проект, состоящий из нескольких компонентов, и в каждом из них есть свои less файлы.
После этого вам достаточно просто запустить сборку проекта и phing создаст все необходимые css файлы.
Успехов!
P.S. Кстати, обратите внимание в проект My Custom Phing Tasks входит ещё одна задача, очень подходящая для следующего шага 🙂
Интересно почитать:
Нужен образец договора перевозки груза автотранспортом? Заходите!
