php - 使用 PHP 自动将引用的 LESS 文件编译成 CSS

Question

我希望发生以下事情:

1. 在服务器端实现流程自动化。

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

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

4. 为此可以处理在我的域中任何地方引用的任何 LESS 文件。

我发现了 Lessphp ，但文档不是很清楚，也没有解释如何动态获取任何 LESS 文件。我想我会发布我是如何让这一切正常工作的，因为我还没有看到关于如何使用 PHP 实现这一目标的演练。

Answer 1

THIS SUMES LESPHP 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: ;

---

如果一切正常，应该会发生以下情况:

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 文件，否则最后修改日期不应更改