Categorie
Articolo

Introduzione a Gulp

Gulp è un Task Runner, cioè uno strumento che permette di compiere in modo automatico una serie di task per lo sviluppo web. In questa guida vedremo come utilizzare Gulp per migliorare e velocizzare il workflow di un developer front end facendo cose come avviare un web server, ricaricare automaticamente il browser quando un file viene modificato, compilare preprocessori come Scss e ottimizzare file CSS, JavaScript o immagini.

Cosa può fare Gulp?

Ognuna di queste elaborazioni che abbiamo visto sopra, viene gestita da un plugin, la lista di plugin di Gulp è molto ampia e sempre in continua crescita, ma nel raro caso in cui non trovaste quello di cui avete bisogno, potete sempre scrivere un vostro plugin in JavaScript!

Gulp è molto potente e si possono fare moltissime cose, ma in questa guida ci soffermeremo sulle basi, poi potete esplorare il resto per conto vostro.

Perché Gulp?

Una delle alternative più diffusa a Gulp è Grunt. Cercando sul web troverete molti articoli che approfondiscono le differenze tra uno e l’altro.

La differenza principale è nel modo in cui possono essere configurati e il workflow che ne risulta. Gulp tende ad essere più semplice da configurare ed è anche più veloce!

Cosa faremo in questa guida

Alla fine di questa guida, avrete una configurazione che vi consentirà di compiere automaticamente le seguenti task:

  • Avviare un web server
  • Compilare i file Sass in CSS
  • Aggiornare automaticamente il browser quando un file viene salvato
  • Ottimizzare tutti gli assets del sito come immagini, file CSS e JS

Inoltre vedremo come concatenare tutte le task in modo da poterle eseguire con un semplice comando e anche come lasciarle in esecuzione.

Installare Gulp

La prima cosa da fare è assicurarsi di avere Node.Js installato sul proprio computer prima di procedere con l’installazione di Gulp. Se non lo avete potete scaricarlo dal sito.

Una volta installato Node, potete installare Gulp eseguendo il seguente comando dal prompt dei comandi:

npm install gulp -g

Il comando npm install è un comando che, utilizzando il Node Packet Manager (npm) installa Gulp sul nostro computer. Inoltre, la flag -g specifica che Gulp dovrà essere installato globalmente sul pc, in modo da poter utilizzare il comando gulp da qualsiasi punto del sistema.

Gli utenti Mac dovranno anche aggiungere la parola sudo prima del comando dato che servono i permessi di amministratore per installare Gulp globalmente.

Ora che abbiamo installato Gulp, procediamo con il creare un progetto.

Creare un progetto con Gulp

La prima cosa da fare è ovviamente una cartella per il nostro progetto. Successivamente, all’interno di essa, utilizziamo il comando npm init.

npm init

Il comando npm init serve ad inizializzare il nostro progetto e creerà un file package.json che conterrà le informazioni sul nostro progetto, per esempio ci sarà la lista delle dipendenza utilizzate (Gulp è una di esse).

Una volta finita la procedura per la creazione del file package.json, possiamo installare Gulp con il seguente comando:

npm install gulp --save-dev

Questa volta Gulp è stato installato nella cartella del progetto, e non globalmente, quindi la parola sudo non sarà più necessaria per Mac.

Nel comando abbiamo aggiunto --save-dev alla fine, questo dice a npm di installare gulp come dipendenza dev nel package.json, quindi una dipendenza necessaria solo nella fase di sviluppo.

Struttura della cartella

Gulp può lavorare con qualsiasi struttura voi decidiate di dare alla cartella del vostro progetto, ma per facilitare la comprensione di questa guida, utilizzeremo la seguente struttura:

|- source/
   |- scss/
   |- js/
   |- images/
|- assets/
|- gulpfile.js
|- package.json
|- node_modules/

La cartella source si occuperà di contenere tutti i file utilizzati durante lo sviluppo, mentre nella cartella assets ci saranno i file ottimizzati per la produzione.

Conoscere la struttura della nostra cartella è necessario mentre andremo a creare la configurazione di Gulp nel file gulpfile.js, il file che contiene tutte le configurazioni di Gulp.

Il primo task con Gulp

La prima cosa da fare per utilizzare Gulp, è richiederlo nel gulpfile.

const gulp = require('gulp');

In questo modo diciamo a Node di andare a cercare nella cartella node_modules un pacchetto chiamato gulp. Quando viene trovato, assegniamo il suo contenuto alla costante gulp.

Ora possiamo creare un task utilizzando la costante gulp. La sintassi di base per un task è la seguente:

gulp.task('nome-task', function() {
  // Contenuto del Task
}

Il nome-task fa riferimento al nome del task, che verrà utilizzato nel momento in cui andremo ad eseguirlo con Gulp. Puoi eseguire il task da riga di comando utilizzando gulp nome-task.

Come prova, creiamo un task chiamato hello che stampa Hello World!.

gulp.task('hello', function(done) {
  console.log('Hello World!');
  done();
})

Ora possiamo eseguire questo comando dalla riga di comando:

gulp hello

Come vedete in console verrà stampato Hello World!

Se volete invece che un task venga lanciato direttamente con il comando gulp senza aggiungere altro, basterà chiamare il task default.

gulp.task('default', function() {
  // Contenuto del Task
}

Lascia un commento

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