Gulp: automatizzare task ripetitivi con i file CSS e JavaScript

L'automazione sta svolgendo un ruolo sempre più importante nei processi dello sviluppo software. Oggi gran parte dei task ripetitivi vengono affidati a tool o ad algoritmi in grado di lavorare in modo autonomo, permettendo dunque al developer di focalizzarsi sull'implementazione di nuova funzionalità o di altri aspetti del software, mentre un'applicazione terza si occupa di eseguire i compiti più tediosi.

Oggi vogliamo presentarvi un'utiliy che si occupa di automatizzare tali task: Gulp. Si tratta di un un piccolo toolkit che automatizza le attività ripetitive. Nel dettaglio Gulp si occupa di operare con i file CSS/JavaScript, li cattura, li raggruppa e successivamente li compila in modo che il browser possa facilmente interagire con essi.

Gulp può quindi essere utile per automatizzare:

• la compilazione di file JavaScript e CSS;
• il Refreshing delle pagine aperte nel browser quando si salva un file;
• gli unit test;
• la code analysis;
• la copia dei file modificati in un specifica directory.

Per tenere traccia dei file da automatizzare è necessario generare un file gulp, mentre per sviluppare il processo di automazione generale verrà sfruttato un file chiamato package.json. Quest'ultimo contiene fondamentalmente la descrizione delle operazioni che andremo ad eseguire e elenca quali dipendenze saranno necessarie per lavorare con i file.

Per installare Gulp possiamo sfruttare il pratico gestore di pacchetti npm:

npm install --global gulp-cli

Se ci interessa utilizzare Gulp solo per un progetto possiamo creare una directory dove saranno contenuti i file di Gulp assieme a quelli del nostro progetto:

mkdir progettoGulp
cd progettoGulp

successivamente inizializziamo il tutto:

>npm init

Tale comando farà avviare un wizard di configurazione ponendo delle domande alle quali dovremo rispondere in modo da personalizzare il nostro programma di automazione.

Adesso installiamo i pacchetti di Gulp per il nostro progetto:

npm install --save-dev gulp

Passiamo quindi alla creazione del file Gulp. Apriamo un editor di testo e generiamo il file gulpfile.js:

nano gulpfile.js

ora inseriamo il task che vogliamo automatizzare, ad esempio:

gulp.task('Ciao', function(done) {
        console.log('Salve!');
        done();
});

Salviamo e proviamo ad eseguire il task:

gulp Ciao

Nella shell sarà dunque visualizzata l'esecuzione del task, la stringa "Salve" e il tempo di esecuzione.

Nel dettaglio:

• var gulp = require(‘gulp’); importa i gulp module;
• gulp.task(‘Ciao’, function(done) { definisce il task che sarà disponibile dalla shell;
• console.log(‘Salve!!’); fa visualizzare la stringa "Salve" sulla shell;
• done(); callback function che indica a Gulp che il task è finito.

Via Gulp