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

2021-12-20 00:00:00 caching compiler-construction php css less

我希望发生以下事情:

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

  1. Have the process automated server side.

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

Simply be able to reference the LESS file as I would a CSS file in my code.

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

The user is returned minified CSS instead of the LESS file - cached so the compiler doesn't need to run unless the LESS file has been updated.

为了使其与任何在我的域内任何位置引用的 LESS 文件一起使用.

For this to work with any LESS file that is referenced anywhere within my domain.

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

I spotted Lessphp, but the documentation isn't very clear, nor does it explain how to dynamically get any LESS file to it. I thought I would post up how I got it all working as I haven't seen a run through on how to achieve this with PHP.

推荐答案

THIS ASSUMES LESSPHP v0.3.8+ 不确定早期版本，但如果没有，您将了解其工作原理不是直接开箱即用的.

THIS ASSUMES LESSPHP v0.3.8+ Unsure about earlier versions, but you'll get the gist of how it works if it doesn't straight out of the box.

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

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

If you were using less.js to compile client side, make sure you change rel="stylesheet/less" to rel="stylesheet"

1) 抓取 Lessphp 我把这些文件放在 /www/compilers/lessphp/代码>用于此演示的上下文

1) Grab Lessphp I placed these files in /www/compilers/lessphp/ for the context of this demo

2) 制作一个 PHP 脚本，我们可以在其中抛出 LESS 文件.这将处理缓存、编译为 CSS 并将 CSS 作为响应返回.我已将此文件放在 /www/compilers/ 并命名为 lessphp.php

2) Make a PHP script that we can throw out LESS files at. This will deal with caching, compiling to CSS and returning the CSS as a response. I have placed this file at /www/compilers/ and called it lessphp.php

此代码的大部分内容都在 Lessphp 站点上，只是其中存在错误，我在最后添加了响应.

Most of this code was on the Lessphp site, except there were errors in it, and I have added the response at the end.

<?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).

This will compile the LESS file (eg, styles/main.less) to a cache file and a CSS file (eg, styles/main.less.css).

3) 添加 mod_rewrite 规则，以便用户请求的任何 LESS 文件都重定向到我们的编译器，并为其提供路径.这被放置在根 .htaccess 文件中.

3) Add a mod_rewrite rule so that any LESS files a user requests are redirected to our compiler, giving it its path. This was placed in the root .htaccess file.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^([^.]*.less)$ compilers/lessphp.php?file=$1 [R,QSA,L]
</ifModule>

如果您使用的是 WordPress，则此规则需要跟在它之后 - 即使 WordPress 位于子目录中，它似乎也会覆盖这些规则，并且对于存在于下面的引用文件(目录明智)不会发生 LESS 编译WordPress 的 .htaccess 规则.

If you are using WordPress, this rule will need to come after it - even if WordPress is in a sub directory, it seems to overwrite these rules, and LESS compilation will not occur for referenced files which exist below (directory wise) WordPress's .htaccess rules.

4) 您的 LESS 代码应该相对于编译器位置进行引用.此外，如果存在空属性，Lessphp 编译器将失败，例如.背景色:;

4) Your LESS code should be relatively referenced in relation to the compilers location. Additionally, Lessphp compiler will fail if there are empty attributes, eg. background-color: ;

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

If all is working well, the following should occur:

  1. 直接浏览你的 LESS 文件 http://domain.com/styles/main.less

被自动重定向到http://domain.com/compilers/lessphp?file=styles/main.less

以缩小的 CSS 呈现

Be presented with minified CSS

main.less.css 和 main.less.cache 现在应该与 LESS 文件位于同一目录中

main.less.css and main.less.cache should now exist in the same directory as your LESS file

上次修改日期不应更改，除非您更新 LESS 文件

The last modified dates shouldn’t change unless you update your LESS file

相关文章