将引用的LESS文件自动编译为CSS [英] Compile a referenced LESS file into CSS with PHP automatically
问题描述
我想要发生以下事情:
-
拥有过程自动化服务器端。
Have the process automated server side.
只要能够引用LESS文件,就像我的代码中的CSS文件一样。
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.
我发现了 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.
推荐答案
本指南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 =stylesheettype =text / csshref =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)Grab 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编译器将失败,例如。 background-color:;
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:
-
直接浏览您的LESS文件
http://domain.com/styles /main.less
自动重定向到 http://domain.com/compilers/lessphp ?file = styles / main.less
显示缩小的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
这篇关于将引用的LESS文件自动编译为CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!