Cos’è Gulp e come si usa!

gulp

Lavorando sul web molto spesso ci si chiede quali tool utilizzare per automatizzare le operazioni più ricorrenti, siano queste la semplice minificazione e offuscamento del codice sorgente o la compilazione e pubblicazione di interi siti web. Tool come Builtbot, Bamboo o Jenkins sembrano complessi da utilizzare, senza considerare che la loro configurazione richiede una buona conoscenza dei sistemi server. Inoltre, molte delle caratteristiche disponibili possono risultare superflue se vogliamo semplicemente effettuare singole e piccole operazioni (task) sui nostri progetti.

gulp e come si usa

Cos’è Gulp

Gulp è uno strumento che ci aiuta ad automatizzare alcune operazioni (tasks) necessarie durante lo sviluppo web. È molto spesso utilizzato dagli sviluppatori front-end per eseguire task come:

  • Ottimizzare fogli di stile CSS, codice JavaScript e immagini.
  • Usare i preprocessori come SASS e LESS.
  • Ricaricare il browser automaticamente quando si salva un file del progetto.

Ovviamente le potenzialità di Gulp vanno oltre la semplice ottimizzazione del codice. Infatti, grazie ai migliaia di plugin disponibili, possiamo eseguire operazioni complesse come la compilazione di file typescript oppure la pubblicazione on-line tramite FTP.

Come usarlo

Utilizzare Gulp è molto semplice, anche per chi si affaccia per la prima volta al mondo dei task runner. Prima di tutto abbiamo bisogno di un ambiente sui cui lavorare. Consiglio di utilizzare una macchina Vagrant come quella descritta nell’articolo Come installare un server web su Vagrant.

  1. Installate NodeJS

    Gulp è un applicazione NodeJs, quindi il nostro ambiente deve essere configurato per eseguire applicazioni Node. Se utilizzate Vagrant o Linux installate Node tramite il comando:

    Se invece utilizzate Mac OS e non volete utilizzare Vagrant, installate NodeJs come descritto sul sito ufficiale.

    Prima di continuare, verificate che Node sia presente sul vostro sistema:

  2. Installare Gulp

    Per installare Gulp è necessario utilizzare il comando npm (Node Package Manager). Il flag –global indica a npm di installare Gulp globalmente, e permette di utilizzare il comando Gulp da qualsiasi posizione del nostro sistema operativo.

    Controllate che dopo l’installazione il comando Gulp sia presente sul vostro sistema:

  3. Creare un progetto Gulp

    Tralasciando per semplicità quella che è la gestione delle applicazioni Node, spostatevi sulla cartella del vostro progetto e installate Gulp localmente.

    Dopo l’installazione, la vostra directory di lavoro sara simile a questa:

    node-folders

    Create il vostro gulpfile.js nella cartella principale del progetto e inserite al suo interno i task che Gulp eseguirà per automatizzare i processi.

  4. Creazione di un task Gulp

    I task Gulp vengono inseriti all’interno del gulpfile.js, quindi iniziate creando il vostro primo (non utilissimo) task.

    La prima riga con il comando require dice a Node di utilizzare il package Gulp installato localmente e presente all’interno della cartella node_modules e di assegnare il “contenuto” del package alla variabile gulp.
    Il task non è altro che una funzione JavaScript con un’etichetta specifica (hello) che esegue le operazioni richieste. In questo caso:

  5. Eseguire un task Gulp

    Creato il vostro task, eseguitelo semplicemente con il comando:

    Il sistema esegue il task e le operazioni ad esso associate, visualizzando a video alcune informazioni utili:

Cosa si può fare

Anche se per alcuni di voi stampare un messaggio a video potrebbe essere esaltante, in realtà esso risulta poco utile nello sviluppo di tutti i giorni. Prossimamente vedremo come eseguire operazioni più complesse attraverso l’uso dei plugin. Installare un plugin è un operazione molto semplice: dopo aver cercato il plugin adatto alle proprie esigenze, basta solamente installarlo con il comando npm install, così come abbiamo fatto per Gulp.

Nei prossimi articoli, inoltre, vedremo come usarlo in modo più specifico per preprocessare fogli di stile CSS con gulp-sass, minificare codice e offuscare codice JavaScript con gulp-uglify.

Curiosi? Commentate e fatemi sapere cosa ne pensate!

4 Commenti

  1. Effe

    Credo che nel punto 3 ci sia un errore nella scrittura del nome del file js. 🙂
    Da: grupfile.js > A: Gulpfile.js

    Risposta
    1. Christian Rizza (Autore Post)

      Grazie tante per la segnalazione correggo subito. Spero tu abbia trovato l’articolo interessante.

      Risposta
  2. giovanni

    Interessante, anche perchè spiega qualcosa che sul sito di gulp nemmeno c’è!
    Domanda: ma se ho un progetto già iniziato e funzionante, posso “iniettarci” gulp lo stesso? o devo per forza iniziare da zero?

    Risposta
    1. Christian Rizza (Autore Post)

      Ciao Giovanni. Si, l’unica cosa che ti serve è avere gulp installato nel sistema. Dopodiché puoi lavorare su qualsiasi file all’interno di un progetto esiste per migliorarlo o semplicemente automatizzare qualche processo.

      Risposta

Lascia un commento

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