AssetsMinify: un plugin WordPress per sviluppare con Sass, LESS e Compass

La svolta che negli ultimi anni ha migliorato più di ogni altra le modalità di organizzazione e di sviluppo Frontend è stata l’introduzione dei Preprocessors CSS.

In Artera siamo attenti a dedicare a pulizia del codice ed ottimizzazione delle risorse una parte notevole del nostro tempo, quindi negli ultimi anni abbiamo entusiasticamente effettuato la svolta verso l’utilizzazione dei Preprocessors e di alcuni framework CSS.

Dal lato relativo al Backend, invece, uno dei CMS che più utilizziamo è WordPress, più che famoso, ormai celebre software sfruttato non più solamente per i blog personali, ma anche per siti internet più complessi.

Il problema

La realizzazione di temi personalizzati per WordPress è uno dei task che più impegna le nostre risorse dedicate allo sviluppo Frontend; l’integrazione del CMS con i preprocessors CSS, tuttavia, non mi ha mai soddisfatto. In realtà WordPress non integra minimamente questa logica di sviluppo, così il programmatore che voglia utilizzare Sass, Less o un framework come Compass è obbligato a lanciare manualmente i comandi per la compilazione sulla copia di sviluppo del template.

Ho deciso, così, di realizzare un plugin di WordPress per evitare la scocciatura della compilazione manuale di codice avanzato per i CSS: così è nato AssetsMinify.

La soluzione

AssetsMinify permette a chi sviluppa temi WordPress di utilizzare codice Sass (sia scss che sass), LESS ed integrare tutte le funzionalità di Compass nel proprio template. Oltre all’integrazione con i Preprocessors ho voluto includere nel plugin tutte le logiche di minificazione e caching delle risorse CSS e JS così da evitare l’installazione e la configurazione di altri plugin a tale scopo.

Alla base della potenza e della flessibilità di AssetsMinify vi è Assetic, plugin PHP utilizzato in particolare da Symfony 2.

Sviluppare temi WordPress al meglio

Con lo sviluppo di AssetsMinify ho voluto dedicare l’attenzione che WordPress offre, ma che tanti sviluppatori purtroppo non hanno, verso l’ottimizzazione del codice per l’inclusione di CSS e JS. WordPress, infatti, mette a disposizione del programmatore le funzioni wp_enqueue_style e wp_enqueue_script per l’inclusione e la gestione della coda dei CSS e JS.

In WordPress fare così:

<link rel="stylesheet" type="text/css" href="stylesheets/screen.css"/>

o così:

<script type=text/javascript src=js/jquery.js></script>

È SBAGLIATO! (Se non lo sapevi stai tranquillo, tutti abbiamo da imparare, e leggi subito la documentazione di wp_enqueue_style e wp_enqueue_script).

AssetsMinify, dunque, va a selezionare tutti i CSS e i JS aggiunti alla coda tramite le due suddette funzioni per compilarli (nel caso di file con estensione sass, scss o less), minificarli e cacharli. In questo modo ogni sviluppatore di temi WordPress che desideri sfruttare AssetsMinify è “costretto” ad includere le risorse CSS e JS come il CMS comanda.

Relativamente ai file JavaScript voglio fare una breve digressione. Le best-practice per l’ottimizzazione delle performance per i siti suggeriscono di includere le risorse JS prima del tag di chiusura (oppure modificare il tipo di inclusione degli script in base alle necessità e al flusso dell’utente all’interno del software ). WordPress offre la possibilità, tramite i parametri di wp_enqueue_script, di includere i file JS all’interno dell’head oppure in fondo al body. In relazione a questa duplice possibilità ho voluto concedere la flessibilità che il CMS stesso permette ovvero di minificare i JS in base alle due modalità di inclusione. Se, dunque, all’interno del tuo tema hai la necessità di includere alcuni JavaScript all’interno dell’head ed altri prima della chiusura del body (soluzione che in ogni caso mi sento di sconsigliare) AssetsMinify lo permette e andrà a generare due file JS differenti per le due posizioni definite.

Infine la funzionalità che dimostra il massimo della flessibilità del plugin: AssetsMinify offre la possibilità di utilizzare file di Preprocessors anche di tipologia differente, ad esempio:

wp_enqueue_style( 'home', get_template_directory_uri() . "/css/styles.css" );
wp_enqueue_style( 'screen', get_template_directory_uri() . "/sass/screen.scss" );
wp_register_style( 'prova', get_template_directory_uri() . "/less/prova.less", false, '1.0' );

Ovviamente è buona norma uniformare il proprio codice utilizzando un solo stile di sviluppo; questa tecnica può essere utile nei casi in cui si debba includere un foglio di stile di una libreria di terze parti che usa un Preprocessor differente.

Risorse utili

Per bug o richieste è possibile sfruttare la sezione support del plugin oppure aprire una Issue su GitHub.

Lascia un commento

Tutti i campi sono obbligatori.
L'indirizzo email non verrà pubblicato

 

Commenti

  1. Pingback: CSS best practices: scrivere al meglio i fogli di stile - blog.artera.it