Articoli

Cos’è Gulp? I primi passi con questo task manager!

Se hai mai sviluppato applicazioni web sicuramente ti sarai scontrato con “noiose” operazioni come minificazione dei file, transpilling di codice, ottimizzazioni immagini e tanto altro ancora.

Scopriamo come Gulp ci può aiutare a velocizzare questi processi e dare una marcia in più alla nostra produttività e non solo.

Cos’è Gulp

Per iniziare partiamo della definizione che troviamo sul sito gulpjs.com

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Detto in parole povere, Gulp è di fatto un task manager che si appoggia a Nodejs, una piattaforma basata sul runtime javascript di Chrome (V8) che ci permette di utilizzare il linguaggio anche al di fuori di un web browser.

Uno dei principali vantaggi di Gulp rispetto ad altri tool simili (vedi GruntJs), è il fatto di utilizzare gli streams per gestire il flusso dei files su cui effettuare le operazioni, garantendo una maggiore velocità e flessibilità (ad esempio non sarà necessario scrivere dei files temporanei durante le elaborazioni richieste).

Installazione

Come detto nel punto precedente Gulp si appoggia a Nodejs per poter funzionare, quindi dovremmo avere installato precedentemente Node sulla nostra macchina.

Insieme a Node potremmo utilizzare NPM (il gestore pacchetti di Node) per poter installare Gulp nel sistema in modo da porterlo usare da riga di comando.

Quindi apriamo il terminale e digitiamo:

npm install --g gulp

Fatto questo adesso dobbiamo installare Gulp come dipendenza del nostro progetto, quindi andiamo nella root del nostro progetto e digitiamo sempre su linea di comando:

npm install gulp --save-dev

Una volta installato il tutto possiamo iniziare ad utilizzare Gulp. L’ultimo passo necessario è creare un file (sempre nella cartella principale del progetto) dove saranno collocati i vari task da eseguire, con il nome di gulpfile.js.

Il nostro primo task

Andiamo a creare adesso il nostro primo task in Gulp, vediamo ad esempio come creare un task per minimizzare i nostri file Javascript.

Per poter gestire le svariate operazioni Gulp vanta di un gran numero di plugin sviluppati e pronti all’uso.

Nell’esempio utilizzeremo 2 plugin:

  • gulp-uglify
  • gulp-rename

Installiamo i plugin tramite NPM
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev

Una volta installato il tutto passiamo al nostro gulpfile.js e scriviamo il nostro primo task che chiameremo scripts

Approfondiamo questo snippet:

Nella prima parte andiamo ad includere i plugin di Gulp che faranno poi il “lavoro sporco” per noi (in realtà Node gestirà l’inclusione tramite la funzione require), mentre nella seconda parte andiamo a definire le operazioni che il nostro task svolgerà (le ho commentate riga per riga).

Per vedere il risultato del task basta lanciare da linea di comando:

gulp scripts

Dopo l’esecuzione, tutti i file .js presenti nella cartella dev/js verranno minificati, rinominati e incollati nella cartella dist/js niente male vero?

Approfondiamo

Come faccio a lanciare più task con un singolo comando?

Passando come secondo parametro alla funzione gulp.task un array contenente il nome di altri tasks questi verranno eseguiti prima del corpo del task stesso, in pratica come se fossero delle dipendenze. Inoltre, denominando il task default, questo potrà essere invocato da riga di comando semplicemente con il comando gulp.

 

Come posso rilanciare i task ad ogni modficia senza utilizzare il comando “gulp” da linea di comando?

Gulp per evitare questa piccola scocciatura mette a disposizione dei watcher

La funzione gulp.watch permette di “osservare” determinati files ed eseguire automaticamente una serie di tasks (definiti nel secondo parametro) quando uno di questi viene modificato: possiamo così lanciare il comando una sola volta all’inizio della sessione e poi continuare a programmare senza preoccupazioni, poichè Gulp provvederà ad ogni modifica fisica del file a rilanciare automaticamente i nostri task!

Conclusione + piccolo regalo

Come avrai capito le potenzialità di Gulp sono elevatissime e permettono grazie alla combinazione con tantissimi tool (Babel, Webpack, Browserify ecc…) una gestione profonda del nostro codice e degli automatismi da cui esso dipende.

Logicamente il seguente articolo vale da introduzione a tutto ciò, lascio a te il compito di approfondire il tutto.

Prima di andare ti vorrei lasciare però un piccolo regalo, ho creato su Github una semplice repo con uno starter di progetto con Gulp, puoi tranquillamente clonare o fare una fork del progetto. Se hai consigli o suggerimenti puoi invece utilizzare i commenti.

Alla prossima! 🙂