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

Мне нужны следующие вещи:

  • У процесса автоматизированная серверная сторона.

  • Просто смогите ссылаться на LESS файл, поскольку я хотел бы получить файл CSS в моем коде.

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

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

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

ОТВЕТЫ

Ответ 1

ЭТО ПРИНИМАЕТ 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 script, который мы можем выпустить 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 не будет возникать для ссылочных файлов, которые существуют ниже (с учетом директорий) Правила WordPress .htaccess.

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