11

我希望发生以下事情：

  1. 拥有流程自动化的服务器端。

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

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

  4. 为此，它适用于在我的域中任何地方引用的任何LESS 文件。

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

4

1 回答 1

17

这假设 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脚本，我们可以扔掉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 在子目录中，它似乎也会覆盖这些规则，并且对于存在于（目录明智）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 文件，否则最后修改日期不应更改

于 2012-09-05T04:47:47.820 回答