Скомпилируйте ссылочный LESS-файл в CSS с помощью PHP автоматически

Я хочу, чтобы произошло следующее:

  1. Имейте процесс автоматизированного сервера.

  2. Просто иметь возможность ссылаться на LESS-файл, как на файл CSS в моем коде.

  3. Пользователю возвращается уменьшенный CSS вместо файла LESS – кэшируется, поэтому компилятор не должен запускаться, пока не будет обновлен LESS-файл.

  4. Для этого нужно работать с любым файлом LESS, на который ссылаются в любом месте моего домена.

Я заметил Lessphp , но документация не очень ясна и не объясняет, как динамически получать к нему LESS-файл. Я думал, что я опубликую, как я все это работаю, так как я не видел, как можно добиться этого с помощью PHP.

ЭТО ПРИНИМАЕТ LESSPHP v0.3.8 + Не уверен в более ранних версиях, но вы получите суть того, как это работает, если оно не прямо из коробки.

<link rel="stylesheet" type="text/css" href="styles/main.less" />

Если вы использовали less.js для компиляции клиентской стороны, убедитесь, что вы изменили rel="stylesheet/less" на rel="stylesheet"

1) Grab Lessphp Я поместил эти файлы в /www/compilers/lessphp/ для контекста этой демонстрации

2) Создайте PHP-скрипт, который мы можем выпустить LESS-файлы. Это будет касаться кэширования, компиляции в CSS и возврата CSS в качестве ответа. Я поместил этот файл в /www/compilers/ и назвал его lessphp.php

Большая часть этого кода была на сайте Lessphp, за исключением ошибок в нем, и я добавил ответ в конце.

 <?php require "lessphp/lessc.inc.php"; $file = $_GET["file"]; function autoCompileLess($inputFile, $outputFile) { // load the cache $cacheFile = $inputFile.".cache"; if (file_exists($cacheFile)) { $cache = unserialize(file_get_contents($cacheFile)); } else { $cache = $inputFile; } $less = new lessc; $less->setFormatter("compressed"); $newCache = $less->cachedCompile($cache); if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) { file_put_contents($cacheFile, serialize($newCache)); file_put_contents($outputFile, $newCache['compiled']); } } autoCompileLess('../' . $file, '../' . $file . '.css'); header('Content-type: text/css'); readfile('../' . $file . '.css'); ?> 

Это скомпилирует файл LESS (например, styles/main.less ) в файл кэша и файл CSS (например, styles/main.less.css ).

3) Добавьте правило mod_rewrite чтобы любые LESS-файлы запросы пользователя перенаправлялись в наш компилятор, указывая на его путь. Это было помещено в корневой файл .htaccess .

 <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^([^.]*\.less)$ compilers/lessphp.php?file=$1 [R,QSA,L] </ifModule> 

Если вы используете WordPress, это правило должно появиться после него – даже если WordPress находится в подкаталоге, он, похоже, перезапишет эти правила, а компиляция LESS не будет выполняться для файлов с ссылками, которые существуют ниже (с учетом каталога) .htaccess WordPress. правила.

4) Ваш код LESS должен быть относительно привязан к местоположению компиляторов. Кроме того, компилятор Lessphp не будет работать, если есть пустые атрибуты, например. background-color: ;


Если все работает хорошо, должно произойти следующее:

  1. Непосредственно просматривайте свой файл LESS http://domain.com/styles/main.less

  2. Автоматически перенаправляться на http://domain.com/compilers/lessphp?file=styles/main.less

  3. Представить миниатюрный CSS

  4. main.less.css и main.less.cache теперь должны существовать в том же каталоге, что и ваш файл LESS

  5. Последние измененные даты не должны изменяться, если вы не обновите свой файл LESS