編譯引用LESS文件導入CSS與PHP自動

我想會發生以下情況：編譯引用LESS文件導入CSS與PHP自動

有過程的自動化服務器端。
只需能夠引用LESS文件就像我在我的代碼中的CSS文件。
用戶返回縮小的CSS而不是LESS文件 - 緩存，因此編譯器不需要運行，除非LESS文件已更新。
爲此與一起使用任何 LESS文件被引用在我的域中的任何地方。

我發現Lessphp，但文檔不是很清楚，也沒有說明如何動態地得到任何LESS文件給它。我以爲我會張貼我是如何工作的，因爲我沒有看到如何使用PHP來實現這一目標。

來源

2012-09-05 Patrick

這個假設LESSPHP v0.3.8 +不確定早期版本，但是如果它不是開箱即用的，它會如何工作。

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

如果您正在使用less.js編譯客戶端，請確保您更改rel="stylesheet/less"到rel="stylesheet"

1）抓住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是一個子目錄，它似乎覆蓋這些規則，LESS編譯不會使下述存在引用的文件發生（目錄明智）WordPress的.htaccess規則。

4）您的LESS代碼應該相對於編譯器位置相對引用。此外，如果有空屬性，Lessphp編譯器將失敗，例如。background-color: ;

如果一切運作良好，應會出現以下情況：

直接瀏覽你的LESS文件http://domain.com/styles/main.less
被自動重定向到http://domain.com/compilers/lessphp?file=styles/main.less
與介紹縮小的CSS
main.less.css和main.less.cache現在應該存在於相同的目錄中LESS文件
除非你更新你的LESS文件的最後修改日期應該不會改變

來源

2012-09-05 04:47:47 Patrick

編譯引用LESS文件導入CSS與PHP自動

回答

相關問題