Primi passi con Gulp

Introduzione

Gulp è un tool che viene utilizzato per migliorare lo sviluppo di un sito web. In particolare può essere utile in questi casi:

  • Velocizzare un server e il sito web stesso
  • Usare un preprocessore come “Sass”o “Less”
  • Ottimizzare (e minimizzare) CSS, JavaScript e immagini

Gulp può fare molte altre cose e può essere impiegato in progetti semplici o molto complessi.

Cosa andremo a fare

In questa guida impareremo come:

  • Installare Gulp
  • Compilare un file Sass o Less
  • Ottimizzare i file CSS, js e le immagini

Installare Gulp

La prima cosa da fare è installare node.js. Questo passaggio è veramente molto semplice ed immediato. Ci basterà infatti scaricare il pacchetto di installazione per windows o seguire le istruzioni che troviamo nel sito nodejs.org.

Una volta installato node.js possiamo procedere all’installazione di Gulp con il comando che segue

Creare un progetto con Gulp

Spostiamoci (da shell) nella directory dove dobbiamo creare il nostro sito web e creiamo il nostro progetto scrivendo, sempre da shell:

Proseguiamo inserendo tutte le informazioni necessarie (puoi semplicemente premere invio se non sai cosa mettere) Verrà creato un file .json contenente tutte le informazioni necessarie.

Adesso che abbiamo creato il nostro file package.json possiamo installare gulp su questo progetto con il comando

Impostiamo il progetto

L’ultimo passaggio prima di iniziare ad usare Gulp sul serio è creare il nostro progetto. Possiamo creare una struttura del genere:

Dove dev sarà la cartella di sviluppo e dist sarà il posto dove si troveranno i file compilati e che useremo.

Creiamo il file gulp

Adesso che abbiamo impostato il nostro progetto possiamo aggiungere qualche utility che ci permetterà di fare quanto descritto in precedenza, sempre da shell scriviamo:

in particolare – andando in ordine – andremo ad installare:

  1. compila sass
  2. imagemin, ottimizza le immagini
  3. uglify, comprime i file js
  4. concat, unisce i file css e js
  5. strip-debug, elimina i console log, gli alert e tutto il codice “extra”
  6. csso, comprime i file css

Compiliamo un file Sass con Gulp

Abbiamo completato il nostro ambiente, è quindi arrivato il momento di fare il primo passo, compilare un file sass.

Creiamo quindi nella cartella “dev/scss” un file denominato “style.scss” con questo contenuto

e nel nostro file html che sarà sotto “dev” andiamo ad inserire il foglio di stile compilato e la classe (per poterne vedere le modifiche)

Infine apriamo il nostro file gulpfile.js ed inseriamo il seguente contenuto:

Nel particolare:

  • andiamo a caricare gulp e il tool per compilare sass
  • aggiungiamo 2 task, il primo si occuperà di prendere il file tutti i  file “.scss” dentro la cartella dev/scss (e sottocartelle), di compilarli e di salvare l’output dentro la cartella dev/css
  • il secondo task si occupa di controllare (watch) le modifiche ai file sass, html e javascript

Adesso non ci resta che lanciare il nostro comando per “avviare” gulp e quanto da noi scritto, scriviamo quindi nella console:

Aggiungiamo, quindi, per esempio il codice:

dove andremo a colorare il contenuto di rosso.

Ricarichiamo la pagine e vedremo il nostro testo diventare rosso per incanto.

Ottimizziamo le immagini

Ottimizzare le immagini è un’operazione molto semplice e praticamente immediata.

Ci basterà usare questo codice:

Nel particolare, dopo aver caricato il tool necessario creeremo un nuovo task che recupererà tutte le immagini sotto “dev/img” e le salverà, ottimizzate (comando “imagemin()”) sotto la cartella dist/img.

Lanciamo quindi da shell

per avere le nostre immagini ottimizzate.

Comprimere css e Javascript

Anche la compressione dei file css e javascript risulta molto semplice e immediata, ci basterà scrivere il seguente codice:

Oltre a caricare uglify, concat e csso andremo a creare 2 tastk.

Il primo comprime tutti i file dentro “dev/js” e qualsiasi sottocartelle e li unisce in un singolo file chiamato main.js, che comprime (uglify) dentro la cartella “dist/js”.

Il secondo esegue le stesse operazioni per i file css.

Lanciamo quindi il comando per comprimere gli script

e quello per lo stile

Automatizzare la compressione di css, js e immagini

Allo stato attuale avremo finito il nostro script. Risulta però un po’ complicato aggiornare e richiamare manualmente ogni singolo task.

Se ti ricordi per compilare i file .scss di Sass avevamo automatizzato la procedura usando un .watch.

Andiamo quindi a riprendere quel codice e modifichiamolo come segue:

Poche modifiche ma sostanziali. Ad ogni modifica di una di quelle cartelle o file verranno richiamate tutte le funzioni e verranno quindi compilati i file sass, compilati e compressi i file js, le immagini e gli script.

Nel nostro file .html ci basterà fare riferimento all’unico file main.js e main.css presenti nelle cartelle dist, come il richiamo alle immagini stesse.

Ricordiamoci sempre di richiamare in console

Puoi scaricare il file demo (i moduli sono ovviamente esclusi) da questo link.

2 Replies to “Primi passi con Gulp”

  1. Ciao Alessio, ho seguito con molto interesse i post su Gulp, potrei scriverti in privato in merito a un problema tecnico che mi sta facendo dannare.
    Ti ringrazio
    ciao
    Antonio

Leave a Reply

Your email address will not be published. Required fields are marked *