Я хочу, чтобы произошло следующее:
Имейте процесс автоматизированного сервера.
Просто иметь возможность ссылаться на LESS-файл, как на файл CSS в моем коде.
Пользователю возвращается уменьшенный CSS вместо файла LESS – кэшируется, поэтому компилятор не должен запускаться, пока не будет обновлен LESS-файл.
Для этого нужно работать с любым файлом 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: ;
Если все работает хорошо, должно произойти следующее:
Непосредственно просматривайте свой файл LESS http://domain.com/styles/main.less
Автоматически перенаправляться на http://domain.com/compilers/lessphp?file=styles/main.less
Представить миниатюрный CSS
main.less.css
и main.less.cache
теперь должны существовать в том же каталоге, что и ваш файл LESS
Последние измененные даты не должны изменяться, если вы не обновите свой файл LESS