Preprocessare CSS con Gulp e Sass

Preprocessare con Gulp

Nell’articolo Cos’è Gulp e come si usa! abbiamo visto come costruire un semplice task e come utilizzarlo all’interno di un progetto. Per rendere le cose un po’ più interessanti possiamo utilizzare Gulp per compilare i fogli di stile con SASS.

Come funziona

È possibile compilare i file CSS tramite SASS attraverso Gulp, creando il relativo task ed eseguendolo.

Per farlo abbiamo bisogno di installare il plugin gulp-sass:

e creare il task nel file gulpfile.js

Come già accennato, la prima cosa da fare è importare il plugin ed associarlo ad una variabile, questa diventerà la funzione per compilare i nostri file. Inoltre all’interno del task troviamo la funzione gulp.src() che permette di specificare, attraverso un pattern, quali file processare.

Esistono 4 tipi di pattern:

  1. *.scss: Il carattere * indica tutti i file all’interno della directory corrente. In questo caso tutti i file con estensione .scss nella directory del progetto.
  2. **/*.scss: Con questo pattern specifichiamo tutti i file con estensione .scss, considerando la directory corrente e tutti file al suo interno e all’interno delle sotto directory.
  3. !not-me.scss: Indica a Gulp di escludere il file specificato dopo il carattere !
  4. *.+(scss|sass): Il simbolo + permette a Gulp di usare dei pattern multipli. In questo caso Gulp utilizzerà tutti i file che abbiamo l’estensione .scss.sass

Nel nostro esempio abbiamo selezionato tutti i file con estensione scss all’interno della cartella app/scss del nostro progetto, includendo anche tutti i file all’interno delle sottocartelle.
La funzione gulp.pipe() permette di passare il risultato dell’operazione precedente alla funzione successiva, nel nostro esempio sass() prima e gulp.dest() dopo. La funzione gulp.dest() permette di scrivere il risultato dell’elaborazione all’interno della cartella di destinazione.

Da notare che la funzione sass() non è una funzione di gulp ma quella definita da:

Per testare il nostro task, creiamo un file scss posizioniamolo nella directory scss e lanciamo il comando

Al termine della della sua esecuzione troveremo i nostri fogli di stile compilati all’interno della cartella di destinazione app/css

Come Fare

Il mio consiglio rimane sempre quello di utilizzare una macchina Vagrant e a tal proposito possiamo trovare sul mio profilo Github una macchina Vagrant già pronta per eseguire Gulp.

Gulp and Pipes

Abbiamo visto come compilare uno o un insieme di file scss per produrre dei fogli di stile in formato css. Questo è stato possibile grazie alla funzione pipe. Le pipe permettono di alterare il contenuto di uno o più file in sequenza.

gulp-pipe

Possiamo dividere il processo in tre passi

  1. Fornire i file sorgenti

    Attraverso il comando gulp.src(pattern) viene detto a Gulp di utilizzare uno o piu file per l’elaborazione come descritto sopra.

  2. Elaborazione

    Attraverso la funzione pipe possiamo definire i passi che permettono di alterare il contenuto dei file attraverso gli altri plugin di Gulp. Un tipico esempio potrebbe avere la seguente forma:

  3. Scrivere i file di destinazione

    Attraverso il comando gulp.dest(path_di_destinazione) viene detto a Gulp di utilizzare un determinata directory per poter scrivere il risultato.

In Conclusione

Gulp permette di fare cose eccezionali come ad esempio la comprimessione, l’offuscamento dei sorgenti oppure la pubblicazione online di un sito attraverso il protocollo FTP. Nei prossimi articoli vedremo come automatizzare molti di questi processi durante la scrittura del codice sorgente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *