Per usare Less CSS è necessario un compilatore che converta il codice LESS in un CSS standard. Vediamo come automatizzare la procedura di compilazione grazie a lessphp e Apache.
ATTENZIONE! Il contenuto di questo articolo necessita di revisione perché redatto più di un anno fa. I comandi e la sintassi utilizzata potrebbero non funzionare in seguito a cambiamenti o aggiornamenti del software. Scrivici a Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo. se hai bisogno di assistenza.
Articolo pubblicato il 09/03/2012
Introduzione a Less CSS
Less CSS è un linguaggio di programmazione che aggiunge un ulteriore livello di astrazione alla semplice sintassi dello standard CSS. Se usato con le dovute precauzioni, Less permette di scrivere fogli di stile più velocemente ottimizzando l'intera procedura di Design Web. Per approfondire le funzionalità di Less CSS vi consigliamo di leggere il capitolo "Manuale Less CSS" precedentemente pubblicato su "Netdesign Developers Network".
Gestire molti file LESS
Il principale problema che si riscontra usando i compilatori LESS disponibili è quello di doversi curare di compilare manualmente gli stili LESS oppure di dover modificare il codice sorgente delle proprie pagine php per integrare, al loro interno, le righe necessarie alla compilazione. Sebbene i compilatori offrano degli strumenti semplicissimi, nei progetti che fanno uso di molti fogli di stile, la gestione dei sorgenti LESS e dei CSS compilati potrebbe diventare complicata; inoltre sul server esisteranno sempre due versioni dello stesso stile: il sorgente LESS ed il CSS compilato che vanno sincronizzati ad ogni modifica del sorgente.
Semplificare la gestione dei file LESS diventa quindi fondamentale per raggiungere il nirvana dello sviluppo: rendere la vita dello sviluppatore il più semplice possibile.
Automatizzare la compilazione
La migliore soluzione per automatizzare la compilazione di file LESS evitando di modificare i sorgenti dei propri script php è quella di spostare la procedura di compilazione dal codice al webserver (nel nostro caso Apache). Per farlo sarà necessario scaricare lessphp, attivare il modulo mod_rewrite di Apache ed utilizzare lo script allegato a questo articolo.
In questo modo qualsiasi file .less richiesto al server verrà compilato prima di essere restituito al client.
Ovviamente per evitare l'overhead della compilazione ad ogni richiesta di un foglio di stile, il nostro script utilizza apc per il caching dei file già compilati e si cura di ricompilare il sorgente soltanto se modificato. Inoltre nello script è implementata la gestione degli header HTTP utili al caching (ETag, If-None-Match) in modo tale da ridurre al minimo l'esecuzione di codice nel caso il client abbia già una copia aggiornata dello stile nella sua Cache. Nel diagramma a blocchi in basso è possibile notare la differenza di architettura tra la compilazione standard con lessphp e l'utilizzo di Apache e mod_rewrite.
Mentre la compilazione standard avviene durante l'esecuzione di index.php (o di tutti gli altri script php del sito web), la compilazione con Apache avviene soltanto in seguito alla richiesta del foglio di stile: spostando la procedura di compilazione dallo script ad Apache è possibile mantenere inalterata la struttura (e le performance) dei vostri script php evitando l'overhead causato dall'accesso al filesystem ad ogni richiesta di index.php.
Integrare LESS in Apache
In questo capitolo vedremo come rendere automatica la compilazione degli stili LESS integrando lessphp in Apache grazie a mod_rewrite. Utilizzando questa architettura non sarà più necessario compilare gli stili manualmente né modificare i sorgenti dei vostri script php.
Scaricare ed installare lessphp
Lessphp è una libreria in PHP che permette la compilazione degli stili Less. Per scaricarla è sufficiente andare sul sito ufficiale di lessphp nella sezione download.
Dopo aver scaricato lessphp, assicuratevi di estrarlo in una directory esterna alla DocumentRoot di Apache, non è una necessità ma lessphp è pur sempre una libreria in fase di sviluppo, ed anche se stabile, meglio non permetterne l'accesso al mondo intero per ragioni di sicurezza. Su un sistema GNU/Linux seguite il seguente codice:
Blocco di codice #1
// Create la directory mkdir /usr/local/lib/php/lessphp cd /usr/local/lib/php/lessphp // Assicuratevi di scaricare la versione più recente wget "http://leafo.net/lessphp/src/lessphp-0.3.3.tar.gz" // Estraete l'archivio tar -xzf lessphp-0.3.3.tar.gz
Compilatore PHP
Dopo aver scaricato e posizionato lessphp all'interno del vostro filesystem, è necessario creare uno script PHP da usare cone handler dei file less. Il nostro script si curerà di compilare ed inserire il file compilato nella cache (APC). Lo script riconoscerà inoltre eventuali modifiche al sorgente LESS curandosi di ricompilare il file.
Questo è l'handler che utilizzerà Apache per la compilazione al volo dei file .less:
Blocco di codice #2
<?php
// Imposta il PATH che punta alla classe lessc.inc.php
$lessphpPath = '/usr/local/lib/php/lessphp/lessc.inc.php';
// Imposta il Content-Type di risposta al client
header("Content-Type: text/css");
// Ottiene gli headers della richiesta
$headers = apache_request_headers();
// Ottiene il Path della risorsa richiesta
// e lo combina col path della DOCUMENT_ROOT di Apache
$lessPath = $_SERVER['DOCUMENT_ROOT']."/".$_GET['less'];
// APC Time To Live. Impostare a 0 per un caching permanente.
$ttl = 3600;
// Ottiene il timestamp dell'ultima modifica al file .less
// per stabilire la "freschezza" della versione compilata.
$lastModTime = filemtime($lessPath);
$cache = apc_fetch($lessPath);
if(isset($headers['If-None-Match']) && $headers['If-None-Match'] == $lastModTime){
// Se il browser possiede una copia valida nella cache
// risponde col codice HTTP 304 Not Modified
header("HTTP/1.1 304 Not Modified");
header("Cache-Control: max-age=25920000, public");
} else {
// Ottiene il timestamp dell'ultimo aggiornamento al file .less compilato
$cachedModTime = apc_fetch("mtime_".$lessPath);
if($cachedModTime == $lastModTime && $cache){
// Se il file non è stato modificato ritorna la versione presente nella cache
header("Last-Modified: ".gmdate("r", $cachedModTime));
header("ETag: ".$lastModTime);
header("Cache-Control: max-age=25920000, public");
print $cache;
} else {
// Se il file è stato modificato viene ricompilato ed aggiornata la cache
if(is_file($lessPath)){
// Include la libreria lessphp
include $lessphpPath;
header("Last-Modified: ".gmdate("r", $lastModTime));
header("ETag: ".$lastModTime);
header("Cache-Control: max-age=25920000, public");
$less = new lessc($lessPath);
$css = $less->parse(null);
// Aggiunge la versione compilata in APC cache
apc_store($lessPath, $css, 3600);
// Aggiunge il timestamp del file less compilato così da poterlo confrontare in un secondo momento
apc_store("mtime_".$lessPath, $lastModTime, 3600);
print($css);
} else {
// Il file less richiesto non esiste
header("HTTP/1.0 404 Not Found");
print("Not Found");
}
}
}
?>
Importante: lo script di compilazione accede ai file .less seguendone il path assoluto.
Per ragioni di sicurezza - ma anche di comodità - inserite lo script php nella stessa directory di lessphp già isolata dalla vostra DocumentRoot. A questo punto modificate il proprietario ed i permessi della directory così da permettere l'accesso ad Apache. Su Linux eseguite:
Blocco di codice #3
// Create lo script lessCompiler.php ed incollate il codice in alto touch /usr/local/lib/php/lessphp/lessCompiler.php // Cambiate il proprietario della directory. Il gruppo e l'utente di Apache cambiano in base alla distribuzione. chown apache.apache /usr/local/lib/php/lessphp -R // Cambiate i permessi sulla directory chmod a+r-w-x /usr/local/lib/php/lessphp -R chmod ug+r+w+x /usr/local/lib/php/lessphp -R
Attivare e configurare mod_rewrite
Adesso che la libreria lessphp e lo script php sono stati installati nel vostro sistema, non resta che configurare mod_rewrite per attivare la gestione automatizzata della compilazione dei file .less.
Mod_rewrite è sicuramente già installato nel vostro sistema ma potrebbe essere disattivato di default; controllate quindi il file di configurazione di Apache ed assicuratevi che il modulo venga caricato. Per accertarvi che mod_rewrite venga caricato, controllate che il file di configurazione di Apache abbia una delle seguenti direttive:
Blocco di codice #4
// Su CentOS, RedHad e Fedora aprite /etc/httpd/conf/httpd.conf LoadModule rewrite_module modules/mod_rewrite.so // Su Ubuntu e Debian, aprite /etc/apache2/mods-enabled/rewrite.load LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
L'organizzazione dei file di configurazione potrebbe differire in base alla versione di Apache o del sistema operativo usato, consultate quindi la documentazione ufficiale del vostro sistema.
A questo punto è necessario configurare mod_rewrite perchè tutte le richieste a risorse .less vengano passate all'handler php (Blocco di codice #2) per la compilazione.
Blocco di codice #5
RewriteEngine On
RewriteCond %{REQUEST_URI} \.(less)$
RewriteRule ^/(.*) /usr/local/lib/php/lessphp/lessCompiler.php?less=$1 [H=application/x-httpd-php]
RewriteLog /var/log/apache2/rew.log
// Evitate valori molto alti preferite quindi un logLevel = 5
RewriteLogLevel 0
A questo punto l'intera DocumentRoot del server sarà pronta ad ospitare i vostri file less e voi non dovrete far altro che integrarli all'interno dei vostri documenti HTML puntando direttamente al sorgente .less:
Blocco di codice #6
<html> <head> <link href="/style.less" type="text/css" rel="stylesheet" > </head> <body> <!-- ... --> </body> </html>
I vantaggi della compilazione "Apache"
Le differenze tra la compilazione nativa offerta da lessphp (la funzione ccompile()) e la compilazione con Apache, mod_rewrite e l'handler sono parecchie e quasi tutte a vantaggio della seconda che, oltre ad automatizzare la compilazione degli stili less, offre delle performance migliori.
Nel grafico in basso abbiamo messo a confronto i risultati di uno stress test (*) eseguito per mettere alla prova i due differenti metodi di compilazione.
Il benchmark ci ha permesso di stabilire il carico massimo gestibile da Apache durante i due differenti approcci alla compilazione (nativa e automatizzata). Dal grafico si nota facilmente che la compilazione "al volo" con Apache raggiunge un picco massimo di più di 1700 risposte al secondo mentre la compilazione nativa arriva al massimo a 1300 risposte al secondo: una differenza di quasi il 31%.
La notevole differenza di prestazioni è dovuta principalmente al numero di accessi al disco: mentre la funzione ccompile() accede - sempre ed in ogni caso - tre volte al filesystem, il nostro script tende a risparmiare accessi al disco grazie all'utilizzo di Apc e alla gestione diretta degli header HTTP relativi al caching (**). In questo modo gli accessi al disco saranno al massimo due e soltanto nel caso il file .less non sia ancora stato compilato/aggiornato. Nel caso invece sia già presente una versione compilata e aggiornata, l'accesso al disco avverrà soltanto una volta rendendo l'intera procedura molto più veloce.
(*) Per lo stress test è stato utilizzato autobench, avviato con i seguenti flags: autobench --single_host --host1 www.test.com --uri1 /path --quiet --low_rate 50 --high_rate 260 --rate_step 10 --num_call 10 --num_conn 5000 --timeout 5 --file output.tsv.
(**) La funzione di controllo della cache HTTP non ha alcun peso nel benchmark ma torna utile nel mondo reale, nel caso in cui il client sia un browser.
