11

私は次のことが起こることを望みます：

  1. プロセスをサーバー側で自動化します。

  2. コード内で CSS ファイルを参照する場合と同じように、LESS ファイルを参照できるようにするだけです。

  3. ユーザーには、LESS ファイルの代わりに縮小された CSS が返されます。キャッシュされているため、LESS ファイルが更新されていない限り、コンパイラを実行する必要はありません。

  4. これは、私のドメイン内のどこかで参照されている任意のLESS ファイルで機能します。

私はLessphpを見つけましたが、ドキュメントはあまり明確ではなく、LESS ファイルを動的に取得する方法も説明していません。PHPでこれを達成する方法についての実行を見たことがないので、すべてを機能させる方法を投稿すると思いました。

4

1 に答える 1

17

これは、 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) LESS ファイルをスローできる PHP スクリプトを作成します。これは、キャッシング、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。

mod_rewrite3)ユーザーが要求するすべての LESS ファイルがコンパイラにリダイレクトされるようにルールを追加し、そのパスを指定します。これはルート.htaccessファイルに配置されました。

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

WordPress を使用している場合、このルールはその後に追加する必要があります。WordPress がサブディレクトリにある場合でも、これらのルールが上書きされるようであり、WordPress の.htaccessルールの下 (ディレクトリごと) に存在する参照ファイルに対して LESS コンパイルは行われません。

4) LESS コードは、コンパイラの場所に関連して相対的に参照する必要があります。さらに、属性が空の場合、Lessphp コンパイラは失敗します。background-color: ;

すべてが正常に機能している場合は、次のようになります。

  1. LESS ファイルを直接参照するhttp://domain.com/styles/main.less

  2. に自動的にリダイレクトされるhttp://domain.com/compilers/lessphp?file=styles/main.less

  3. 縮小された CSS が表示される

  4. main.less.cssLESSファイルとmain.less.cache同じディレクトリに存在するはずです

  5. LESS ファイルを更新しない限り、最終更新日は変更されません。

于 2012-09-05T04:47:47.820 に答える