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

小编典典

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

css

我希望发生以下事情：

具有流程自动化服务器端。
就像我的代码中的CSS文件一样，仅能够引用LESS文件。
返回给用户的是缩小的CSS而不是LESS文件-已缓存，因此除非LESS文件已更新，否则编译器无需运行。
为了使其与我域中任何地方引用的所有 LESS文件一起使用。

我发现了Lessphp，但是文档不是很清楚，也没有说明如何动态地向其中获取任何LESS文件。我以为我会发布如何使所有功能正常工作，因为我还没有看到如何用PHP实现这一目标的过程。

阅读 478

2020-05-16

共1个答案

小编典典

该组件LESSPHP v0.3.8 + 不确定较早的版本，但是如果不立即使用它，您将了解其工作原理。

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

如果您使用less.js来编译客户端，请确保更改rel="stylesheet/less"为rel="stylesheet"

1）GrabLessphp我将这些文件放在/www/compilers/lessphp/此演示的上下文中

2）创建一个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: ;

如果一切正常，则应进行以下操作：

直接浏览您的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文件，否则上次修改日期不应更改

2020-05-16