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

2022-01-17 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/code> 用于此演示的上下文

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

2) 制作一个我们可以丢弃 LESS 文件的 PHP 脚本.这将处理缓存、编译为 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

相关文章