問題描述
我希望發生以下事情:
使流程自動化服務器端.
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:
直接瀏覽你的 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
這篇關于使用 PHP 自動將引用的 LESS 文件編譯為 CSS的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！