Usare Grunt per Compilare SASS

Usare Grunt per Compilare SASS e Compass

Abbiamo da poco concluso l'anteprima del corso su SASS che a breve verrà lanciato sotto forma di epub e dovresti aver già scoperto quante cose carine puoi realizzare. Per tutto il corso ti ho consigliato di utilizzare un'applicazione grafica per compilare il codice SASS in CSS, ma se ti piace la riga di comando, questo appuntamento fa per te!

Prima di tutto voglio chiarire che questo non è un articolo di tipo introduttivo: ho deciso di partire da un livello più alto, perché troverai una più che completa descrizione di Grunt all’interno di un articolo apparso recentemente su WebHouse. Ti consiglio caldamente la sua lettura perché scorre molto bene ed è incredibilmente intuitivo.

Siccome ho già fatto alcuni esperimenti con questa applicazione, ho deciso presentarti qualcosa che non è presente nell’articolo sopraccitato: in quello, l’autore descrive come installare Grunt ed i plugin necessari per compilare LESS.js, linguaggio che abbiamo già trattato diverse volte su questo sito. Questo linguaggio è stata la mia prima esperienza nel campo dei linguaggi precompilati per i CSS (e devo ammettere che è stata un’ottima esperienza!), ma recentemente mi sono trovato a lavorare a stretto contatto con SASS e devo ammettere che, avendoli provati entrambi, ritengo il secondo di gran lunga il migliore.

Ma in questo articolo non voglio andare a paragonare questi due linguaggi per decretare il vincitore: piuttosto voglio coprire un aspetto che nell’altro articolo non è stato trattato, ovvero come compilare SASS e la sua estensione Compass grazie a Grunt.

Probabilmente hai già iniziato a muovere i primi passi con SASS utilizzando Prepros, proprio come io stesso ti ho suggerito e quindi potrebbe girarti in testa la domanda: perché dovrei usare Grunt?

Domanda più che legittima!

Bene: il primo motivo è che essendo un programma senza interfaccia grafica, il suo peso all’interno del tuo sistema sarà sicuramente inferiore a quello di un qualsiasi altro precompilatore dotato di interfaccia grafica. Oltre a questo bisogna dire che il numero di plugin presenti per Grunt ha quasi raggiunto le 3000 unità, il che mi porta a dire che potrai utilizzarlo per qualsiasi progetto!

Ovviamente non sarai obbligato ad usarlo: se ti trovi bene con Prepros (o altra app simile) per sviluppare con SASS e Compass, non devi assolutamente cambiare bandiera! Io sto scrivendo questo articolo per renderti libero dal dover utilizzare una applicazione grafica e estendere i linguaggi che potrai andare ad utilizzare.

Due Parole sulle GUI

Con il termine GUI (Graphic User Interface) si identifica qualsiasi applicazione che presenta un’interfaccia grafica. Diciamoci la verità: avere dei pulsanti con icone e menu da consultare rende il tutto più intuitivo, ma molto spesso queste applicazioni non riescono a stare al passo con gli sviluppi delle singole librerie ed a volte dovremo aspettare diverso tempo per ottenere l’aggiornamento che comprenda le nuove funzionalità.

Con Grunt questo tempo viene incredibilmente ridotto!

Questo perché la comunità di sviluppatori open source che collabora al progetto è molto attiva si impegna costantemente per dare supporto alle ultime tecnologie di sviluppo che quotidianamente appaiono su Internet.

Un altro vantaggio di Grunt è la possibilità di specificare per ogni progetto i linguaggi che vuoi utilizzare. Questo comporta un utilizzo molto più intelligente delle risorse: durante l’avvio di Prepros e di altri programmi simili, tutte le librerie incluse al suo interno vengono comunque caricate – anche se non vengono utilizzate! – andando ad occupare inutilmente la memoria del tuo sistema.

Iniziamo a Sporcarci le Mani?

Adesso che abbiamo fatto questa piccola introduzione sui motivi per i quali ti consiglio di sperimentare questa applicazione, cerchiamo di fare qualcosa di concreto!

Abbiamo detto che voglio mostrarti come sia possibile compilare i propri file SASS includendo anche la libreria Compass, giusto? Bene, muoviamo un passo alla volta e vediamo di cosa abbiamo bisogno per farlo.

La primissima cosa da fare è configurare il progetto. Per fare questo è necessario recarsi all’interno della cartella contenente questo progetto utilizzando il terminale (ricorda: Grunt è un’applicazione da riga di comando ;) ), utilizzando il comando cd.

Come dovresti aver scoperto dall’articolo su WebHouse, per configurare un nuovo progetto è sufficiente lanciare il comando npm init. Ci verrà posta qualche domanda sulle caratteristiche del progetto: non siamo obbligati a rispondere a tutte!

Per chiarezza, di seguito trovi le informazioni che ho inserito durante la preparazione del mio progetto:

Inserendo questi dati non abbiamo fatto altro che eseguire dei comandi che hanno permesso a Grunt di creare per noi il file in formato JSON, che gli permette di sapere quali plugin verranno utilizzati all’interno del progetto. Il file prenderà il nome di package.json ed avrà una sintassi molto simile alla seguente:

Come puoi notare, al momento questo file non contiene altro che le informazioni che abbiamo passato precedentemente: in seguito verrà riempito con il resto, non avere fretta!

Se non sai che cosa sia la sintassi JSON non ti devi assolutamente preoccupare. Detto semplicemente, è un formato standard utilizzato per passare dei dati tra programmi differenti ed è incredibilmente utile e semplice da capire! Per gli scopi di questo articolo non abbiamo alcun interesse nell’approfondire questo argomento ma se sei interessato, puoi leggere questa risposta presente su StackOverflow.

All’interno di questo documento verranno inseriti i plugin che vogliamo far usare a Grunt all’interno del nostro progetto ma, come andremo a vedere a breve, per applicare le modifiche non avremo neanche bisogno di aprire questo file!

È Giunto il momento di Installare SASS

Tutta questa fatica e non abbiamo ancora installato SASS? Beh, se proprio devo essere sincero, in effetti è proprio così. Grunt offre moltissimi template che potrai utilizzare per configurare i tuoi progetti utilizzando una singola riga di codice, ma in questo articolo vogliamo sporcarci le mani e fare un passo alla volta. Se poi vuoi approfondire l’argomento template, non devi far altro che lasciarmi un commento in proposito. ;)

Ma il tuo interesse è quello di iniziare ad utilizzare SASS nel minor tempo possibile e, come ti ho detto precedentemente, anche se dovrai inserire queste informazioni all’interno di package.json non avrai il bisogno di aprirlo e modificarlo.

Questo è possibile perché, utilizzando Grunt, hai a disposizione dei semplici comandi per specificare le dipendenze per questo progetto. La prima dipendenza che dovrai inserire. è lo stesso Grunt.

Per completezza, di seguito ho riportato tutti i comandi che ti permetteranno di aggiungere i plugin necessari per compilare anche SASS.

Come prima, questi comandi verranno eseguiti dal tuo terminale: in questo modo dirai a Grunt che per questo progetto vuoi utilizzare SASS e il suo compilatore (watch). Se stai pensando a dove ho trovato i nomi di questi plugin, è presto detto: sono andato sulla pagina Plugin del sito di Grunt e ho cercato quello che mi serviva! ;)

Ok, ma… perché abbiamo aggiunto al comando npm install l’opzione --save-dev? Con questa opzione non stiamo soltanto installando localmente i plugin di cui abbiamo bisogno, ma stiamo anche modificando il file package.json per aggiungere queste dipendenze.

Se non mi credi, una volta lanciati questi comandi, prova a controllare il contenuto del file creato prima: il mio è stato modificato, e il tuo?

Come puoi notare è apparsa la nuova sezione devDependencies, all’interno della quale sono presenti le dipendenze che il tuo progetto dovrà soddisfare: avere disponibile il plugin per SASS e quello per watch. La cosa bella del lavorare con questi file di testo è che potrai facilmente condividerli con i tuoi colleghi e tutti lavorerete su un progetto che presenta le stesse impostazioni!

Adesso potresti pensare: Ok ho fatto anche questo, quindi sono pronto a compilare il mio SASS? Ni… anzi è più un no.

Al momento hai preparato tutte le dipendenze ma prima di poter compilare i tuoi file SASS quello che devi fare è far sapere a Grunt come comportarsi. Fin ora abbiamo soltanto comunicato le dipendenze che verranno usate nel progetto ma Grunt ancora non sa

  • dove trovare i file da compilare;
  • dove salvare il .css generato;
  • come comportarsi di fronte ad errori e modifiche

Per fare tutto questo dovrai creare un nuovo file che prende il nome di Gruntfile.js: che nome originale, non credi?

So che stai pensando qualcosa come “sono 10 minuti che leggo e ancora non ho compilato niente, con Prepros ero già a metà lavoro!”. In parte questo è vero, ma devi anche pensare alla scalabilità che hai impostando un progetto con Grunt. Come dicevo prima, esistono template e plugin che velocizzano il nostro lavoro e usando Grunt non avrai limiti di sviluppo!

Anche la sintassi di questo file è standard: andiamo a scoprirla assieme!

Purtroppo in questa sede non posso andare riga per riga a spiegarti come è stato creato questo file, uscirei dagli scopi di questo (già lungo) articolo. Se però utilizzi la stessa struttura che ti ho presentato nel corso rivolto a SASS, puoi tranquillamente fare copia/incolla del codice che ti ho appena presentato. Se così non fosse, ecco qualche utile spiegazione:

  • riga 1 – con module.exports = function(grunt) stiamo creando un contenitore all’interno del quale inseriremo tutta la configurazione necessaria a Grunt. Qua non c’è molto da dire perché è una stringa standard che si usa con questa applicazione;
  • riga 4 – a questo punto utilizziamo il metodo initConfig grazie al quale possiamo impostare tutti i task ed opzioni che dobbiamo usare all’interno del progetto;
  • riga 6 e 13 – qui creo i veri e propri task: prima dico a SASS come dovrà comportarsi con i file .css e .scss e successivamente creo il task watch, che sfrutterà SASS per compilare il codice ogni volta che il file .scss viene salvato;
  • riga 22 e 23 – in queste due righe dico a Grunt di caricare i plugin che effettivamente mi permettono di compilare il codice SASS ed osservare le modifiche fatte sui file indicati. Il metodo da usare è grunt.loadNpmTasks( 'nome_plugin' );
  • riga 24 – ecco giunto il momento di registrare il task che abbiamo creato alla riga 13. In questo caso il nome del task è default (ovvero quello che Grunt userà se non specificato diversamente) e grazie al metodo grunt.registerTask() sarai in grado di collegarlo a watch.

Spero di non averti confuso troppo le idee con questa veloce spiegazione. Se qualcosa non è chiaro, ti ricordo che potrai chiedermi di approfondire questi argomenti commentando questo stesso articolo.

Tutto quello che resta da fare è tornare sul nostro terminale aperto nella cartella del progetto e lanciare semplicemente il comando grunt: adesso sì che siamo pronti a compilare il nostro codice SASS:

Ci Manca Ancora il Compass!

Ora sei in grado di inserire il tuo codice SASS e di compilarlo in CSS; manca ancora la possibilità di utilizzare la libreria di mixin Compass. Se non la conosci, ti invito a scoprirla consultando questa lezione perché presenta delle funzionalità davvero interessanti ;)

Finora mi sono dilungato, ma adesso sai tutto quello che ti serve per utilizzare Compass: Tutto quello che dovrai fare è sostituire il plugin dedicato a SASS ed utilizzare quello dedicato a Compass. Tutto grazie a due semplici comandi:

Inutile dirlo: questi comandi modificano anche il tuo package.json; tutto quello che manca è personalizzare il file Gruntfile.js per creare il task compass e permettere a watch di compilare il codice SASS (arricchito dai mixin di Compass) alle modifiche del file.

Come puoi vedere le modifiche applicate sono molto piccole: quello che mi interessa farti notare è che al posto di specificare i file da compilare (come è successo con il plugin per SASS), con Compass devi specificarne le opzioni, le quali ti evitano di dover creare file aggiuntivi di configurazione (ad esempio, il file config.rb) ;)

Conclusioni

Siamo giunti alla fine di un articolo che avevo voglia di scrivere da tanto tempo!

Grunt rappresenta una grande rivoluzione, perché con i suoi (quasi) 3000 plugin sarai in grado di automatizzare praticamente qualsiasi task.

Se vuoi conoscere tutte le opzioni del plugin Compass ti consiglio di consultare la pagina dedicata, così come ti consiglio di farlo per qualsiasi altro plugin desideri usare con Grunt ;)

Lascia che ti ringrazi per l’attenzione e la volontà che hai dimostrato nell’aver letto questo articolo fino alla fine: se hai trovato interessanti le informazioni contenute, non posso fare a meno di chiederti un piccolo aiuto, condividendolo con i tuoi colleghi ed amici sviluppatori.

E se hai qualche dubbio o desideri approfondire i concetti appena appresi, non esitare a farmelo sapere attraverso i commenti!

Lascia il tuo Pensiero