使用PHP自动将引用的LESS文件编译到CSS中

Question

我希望发生以下事情:

1. 让流程自动化服务器端.

2. 只需能够像我在代码中的CSS文件一样引用LESS文件.

3. 用户返回缩小的CSS而不是LESS文件 - 缓存,因此除非LESS文件已更新,否则编译器不需要运行.

4. 为此,可以使用在我的域中任何位置引用的任何 LESS文件.

我发现Lessphp,但文档不是很清楚,也没有解释如何动态获取任何LESS文件.我想我会发布我是如何完成所有工作的,因为我还没有看到如何通过PHP实现这一点.

Answer 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)制作一个我们可以丢弃LESS文件的PHP脚本.这将处理缓存,编译为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位于子目录中,它似乎会覆盖这些规则,并且对于存在于下面(目录明智)WordPress .htaccess规则的引用文件,不会发生LESS编译.

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文件,否则不应更改上次修改日期