Compilare LESS CSS al volo con Apache

Compilare LESS CSS al volo con Apache.

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.

Diagramma a blocchi compilazione lessphp Vs compilazione Apache.

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

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

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.

Benchmark compilazione lessphp Vs compilazione Apache e mod_rewrite

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.

Netdesign black logo


Netdesign di Fabio Buda, Via Pietro Nenni n.2
96013, Carlentini, SR, P.Iva 01687250892, C.F. BDUFBA87C10C351T
http://www.netd.it - info@netd.it

Made with ❤ in Sicily by Netdesign