Quando ho ricostruito il tema del blog da zero quasi un anno fa, ammetto di averlo fatto un po’ in fretta, per l’entusiasmo di tornare a trasmettere da questi schermi. Mi ero ripromesso di mettervi mano subito dopo il lancio, ma poi mi sono lasciato prendere dalle pulizie ai contenuti e così l’aspetto grafico è finito in secondo piano. Ovviamente l’omino seduto sulla mia spalla non mi lasciava in pace, specialmente ogni volta che aprivo il blog sul cellulare, ricordandomi di quanto brutta fosse la user experience associata alla navigazione. Tre righine appiccicate con un po’ di colla vinilica che, quando toccate, facevano comparire uno scarno menu che non dava neppure la possibilità di accedere alle sottocategorie in ogni stanza del sito. Poi il passaggio al nuovo hosting mi ha dato la motivazione per rimettermi al lavoro, e così ho cominciato a modificare i fogli di stile ed il codice Javascript per implementare un’interfaccia che facesse contento il mio alter ego. Ben presto mi sono accorto che minificare (mi si perdoni questo neologismo) quei file a mano ogni volta iniziava a diventare noioso. Era giunta l’ora di mettere in campo qualcosa per automatizzare quella funzione: GulpJS.
Gulp è uno strumento che consente di automatizzare flussi di lavoro lenti e ripetitivi e comporli in sequenze efficienti. Gulp è usato spesso per eseguire attività che normalmente bisognerebbe fare a mano, come avviare un server web, compilare fogli di stile, ottimizzare risorse come immagini e JavaScript, eseguire unit test e analisi del codice, e via dicendo. Con Gulp è possibile avere un maggiordomo che si occupa dietro le quinte di eseguire quelle operazioni ogni qualvolta si salva un file.
Per cominciare, bisogna installare NodeJS, una piattaforma Javascript per lo sviluppo web. Nello specifico, utilizzeremo il suo gestore di pacchetti npm per installare Gulp. Nel mio caso specifico, una piacevole sorpresa è stata quella che potevo scaricare l’intero ambiente NodeJS su Supporthost, senza la necessità di essere l’amministratore del server, scompattando il tutto all’interno della mia cartella personale. Mi è bastato aggiungere il percorso alla variabile PATH per avere a disposizione npm e tutti i suoi pacchetti in qualsiasi cartella mi trovassi con il terminale. A questo punto ho digitato:
# npm install gulp-cli
Dopo una decina di secondi, mi veniva comunicato che tutto era andato bene. A quel punto ho potuto controllare quale versione avevo con:
# gulp --version
Verificato che tutto funzionava a dovere, sono entrato nella cartella del tema, ed ho creato una sottocartella dev in cui tenere tutti gli strumenti che intendevo usare. Qui ho digitato:
# npm init
che crea il file package.json in cui saranno elencate tutte le estensioni usate per questo specifico progetto. Installiamo queste estensioni con:
# npm install --save-dev gulp gulp-clean-css gulp-minify gulp-sass sass
Il pacchetto gulp-sass, in particolare, consente di tradurre i fogli di stile in SASS, che rende la scrittura più intuitiva grazie all’uso di concetti come variabili, funzioni ed annidamenti. Così invece che avere un foglio di stile gigantesco, ho cominciato a spezzarlo nelle sue varie parti individuali (intestazione, barra laterale, piè di pagina, definizioni globali di colori, ecc), più facili da gestire ed aggiornare all’occorrenza. A questo punto, bisogna creare un file gulpfile.js, in cui si dice a Gulp quali cartelle tenere d’occhio, e cosa fare quando uno dei file in esse contenuti viene modificato. Appena le istruzioni sono pronte, non resta che lanciare:
# gulp watch
Se vuoi dare un’occhiata al semplice gulpfile.js che ho creato per il mio tema, trovi tutto sul mio account Github. “E per la navigazione sul cellulare, come hai risolto?” si chiederanno i miei piccoli lettori. Non temere, sto preparando un articolo dove spiego tutto, in preparazione del lancio ufficiale di questa nuova versione del tema.