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ì:
[code type=”markup”]
[/code]
o così:
[code type=”markup”]
[/code]
È 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
