PHP: Компиляция LESS с помощью Phing

Владимир | | Phing, PHP, Web разработка.

phing-less

В последнее время библиотеки, которые добавляют новые возможности 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 входит ещё одна задача, очень подходящая для следующего шага 🙂

Интересно почитать:

Нужен образец договора перевозки груза автотранспортом? Заходите!

  • Вячеслав Тертычный

    а можно просто использовать winless и подобные

    • Это не равноценная замена. Вам придется решить проблему запуска того же winless автоматически.

      • Вячеслав Тертычный

        там указывается папка для мониторинга, и при сохранении less файла winless его автоматически «компилит»

        • Хорошо, а сжатие и объединение файлов после компиляции? 😉

        • Вячеслав Тертычный

          я сделал import main.less, form.less и normalise.less в файле style.less, в html файлах подключаю только style.css, таким образом получается 1 css файл.

          по минимизации css, конкретно в winless есть галочка minify, про остальные точно не скажу

        • Понимаете, идея не в том, чтобы в html разметке подключить 1 css файл, а в том, чтобы браузер отправил только 1 запрос и получил все CSS стили.

  • Pingback: Schlampe aus edlen Hause vor der Livecam()

  • ывпп

    впыпы