Question

我希望发生以下事情：

让流程自动化服务器端。
只需在我的代码中引用LESS文件就像我的CSS文件一样。
用户返回缩小的CSS而不是LESS文件 - 缓存，因此除非LESS文件已更新，否则编译器无需运行。
为了使用我的域中任何位置引用的任何 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）抓取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位于子目录中，它似乎会覆盖这些规则，并且对于下面存在的引用文件不会发生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文件

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

1 个答案: