2012-09-05 25 views
10

quiero las siguientes cosas que ocurren:Compilar un archivo MENOS referencia en CSS con PHP automáticamente

  1. tener el lado del servidor proceso automatizado.

  2. Simplemente ser capaz de hacer referencia al archivo LESS como lo haría con un archivo CSS en mi código.

  3. El usuario recibe CSS minificado en lugar del archivo LESS, en caché, por lo que el compilador no necesita ejecutarse a menos que se haya actualizado el archivo LESS.

  4. Para que esto funcione con cualquier archivo LESS que se haga referencia en cualquier lugar dentro de mi dominio.

manchada Lessphp, pero la documentación no es muy clara, ni explica cómo obtener dinámicamente cualquier archivo MENOS a ella. Pensé que publicaría cómo funcionaba todo, ya que no había visto nada sobre cómo lograr esto con PHP.

Respuesta

17

ESTE ASUME LESSPHP v0.3.8 + No estoy seguro de las versiones anteriores, pero obtendrá la esencia de cómo funciona si no lo saca de la caja.

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

Si estaba utilizando less.js para compilar el lado del cliente, asegúrese de cambiar rel="stylesheet/less" a rel="stylesheet"

1) Grab Lessphp coloqué estos archivos en /www/compilers/lessphp/ para el contexto de esta demostración

2) Cree un script PHP al que podamos arrojar archivos LESS. Esto tratará con el almacenamiento en caché, la compilación de CSS y la devolución del CSS como respuesta. He colocado este archivo en /www/compilers/ y lo llamé lessphp.php

La mayoría de este código estaba en el sitio Lessphp, excepto que había errores en él, y he agregado la respuesta al final.

<?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'); 
?> 

Esto compilará el archivo MENOS (por ejemplo, styles/main.less) a un archivo de caché y un archivo CSS (por ejemplo, styles/main.less.css).

3) Agregue una regla mod_rewrite para que los archivos LESS que un usuario solicite sean redirigidos a nuestro compilador, dándole su ruta. Esto se colocó en el archivo raíz .htaccess.

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

Si está utilizando WordPress, esta regla tendrá que venir después de él - incluso si WordPress está en un subdirectorio, parece sobrescribir estas reglas, y la compilación MENOS no se producirá para los archivos de referencia que existen por debajo (directorio sabio) Reglas de WordPress .htaccess.

4) Su código LESS debe estar relativamente referenciado en relación con la ubicación de los compiladores. Además, el compilador de Lessphp fallará si hay atributos vacíos, por ej.background-color: ;


Si todo funciona bien, debería ocurrir lo siguiente:

  1. navegar directamente su archivo MENOS http://domain.com/styles/main.less

  2. será redirigido a http://domain.com/compilers/lessphp?file=styles/main.less

  3. presentará con minified CSS

  4. main.less.css y main.less.cache ahora debe existir en el mismo directorio que el archivo MENOS

  5. Las fechas de última modificación no deben cambiar a menos que actualice su archivo MENOS