Gulp: un toolkit per automatizzare attività dolorose nello sviluppo

Gulp è un piccolo toolkit che automatizza le attività ripetitive. Queste attività ripetitive sono solitamente la compilazione di file CSS, JavaScript o fondamentalmente quando usi un framework che si occupa di file JavaScript/CSS non standard, vorrai utilizzare uno strumento di automazione che prenda quei file, li impacchetti insieme e compili tutto in modo che il tuo browser possa capire facilmente Esso.

Gulp è utile per automatizzare le seguenti attività:

• Compilazione di file JS e CSS
• Aggiornamento della pagina del browser quando si salva un file
• Esegui un test unitario
• Analisi del codice
• Copia dei file modificati in una directory di destinazione

Per tenere traccia di tutti i file necessari per creare un file gulp, sviluppare il tuo strumento di automazione o automatizzare le attività, devi generare un file package.json. Il file contiene fondamentalmente la spiegazione di cosa c'è all'interno del tuo progetto, di quali dipendenze hai bisogno per far funzionare il tuo progetto.

In questo tutorial imparerai come installare Gulp e come automatizzare alcune attività di base per i tuoi progetti. Utilizzeremo npm, che sta per gestore pacchetti nodo. Viene installato con Node.js e puoi verificare se hai già installato Nodejs e npm con:

node --version
npm --version

Se non lo hai già installato sul tuo sistema, ti consiglio di consultare il tutorial: Installa l'ultima versione di Nodejs e NPM nei sistemi Linux.

Come installare Gulp su Linux

L'installazione di gulp-cli può essere completata con npm utilizzando il seguente comando.

npm install --global gulp-cli

Se desideri installare il modulo gulp localmente (solo per il progetto corrente), puoi utilizzare le istruzioni seguenti:

Crea una directory di progetto e naviga al suo interno:

mkdir myproject
cd myproject

Successivamente, utilizza il seguente comando per inizializzare il tuo progetto:

npm init

Dopo aver eseguito il comando precedente, ti verranno poste una serie di domande per dare al tuo progetto un nome, una descrizione della versione e altro. Conferma infine tutte le informazioni che hai fornito:

Ora possiamo installare il pacchetto gulp nel nostro progetto con:

npm install --save-dev gulp

L'opzione --save-dev indica a npm di aggiornare il file package.json con le nuove devDependencies.

Tieni presente che le devDependencies devono essere risolte durante lo sviluppo, mentre le dipendenze durante il runtime. Poiché gulp è uno strumento che ci aiuta nello sviluppo, è necessario risolverlo in fase di sviluppo.

Crea file Gulp

Ora creiamo un gulpfile. Le attività che vogliamo eseguire si troveranno in quel file. Viene caricato automaticamente quando si utilizza il comando gulp. Utilizzando un editor di testo, crea un file denominato gulpfile.js. Ai fini di questo tutorial, creeremo un semplice test.

Puoi inserire il seguente codice nel tuo gulpfile.js:

var gulp = require('gulp');

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

Salva il file e ora prova ad eseguirlo con:

gulp hello

Dovresti vedere il seguente risultato:

Ecco cosa fa il codice sopra:

• var gulp=require('gulp'); – importa il modulo gulp.
• gulp.task('hello', function(done) { – definisce un'attività che sarà disponibile dalla riga di comando.
• console.log('Hello world!'); – stampa semplicemente "Hellow world! " sullo schermo.
• done();: utilizziamo questa funzione di callback per indicare a gulp che le nostre attività sono terminate.

Naturalmente quanto sopra era solo un esempio per mostrare come può essere organizzato gulpfile.js. Se vuoi vedere le attività disponibili dal tuo gulpfile.js, puoi utilizzare il seguente comando:

gulp --tasks

Plugin Gulp

Gulp ha migliaia di plugin disponibili, tutti dotati di funzionalità diverse. Puoi controllarli nella pagina dei plugin di Gulp.

Di seguito utilizzeremo il plugin minify-html in un esempio più pratico. Con la funzione seguente, puoi minimizzare i file HTML e inserirli in una nuova directory. Ma prima installeremo il plugin gulp-minify-html:

npm install --save-dev gulp-minify-html

Puoi rendere il tuo gulpfile.js simile a questo:

cat gulpfile.js

Uscita del campione

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Quindi puoi minimizzare i file HTML utilizzando i seguenti comandi.

gulp minify-html
du -sh /src dest/

Conclusione

Gulp è un utile toolkit che può aiutarti a migliorare la tua produttività. Se sei interessato a questo strumento ti consiglio vivamente di controllare la sua pagina di documentazione, disponibile qui.