Gulp - Sviluppo di un'applicazione

Nei capitoli precedenti, hai studiato l' installazione di Gulp e le basi di Gulp che includono il sistema di compilazione di Gulp, il gestore di pacchetti, il task runner, la struttura di Gulp, ecc.

In questo capitolo, vedremo le basi per lo sviluppo di un'applicazione, che include quanto segue:

• Dichiarazione delle dipendenze richieste
• Creazione di attività per le dipendenze
• Esecuzione dell'attività
• Guardando l'attività

Dichiarazione delle dipendenze

Quando si installano i plug-in per l'applicazione, è necessario specificare le dipendenze per i plug-in. Le dipendenze sono gestite dal gestore dei pacchetti come bower e npm.

Prendiamo un plugin chiamato gulp-imageminper definirne le dipendenze nel file di configurazione. Questo plugin può essere utilizzato per comprimere il file immagine e può essere installato utilizzando la seguente riga di comando:

npm install gulp-imagemin --save-dev

È possibile aggiungere dipendenze al file di configurazione come mostrato nel codice seguente.

var imagemin = require('gulp-imagemin');

La riga sopra include il plug-in ed è incluso come un oggetto denominato imagemin.

Creazione di attività per dipendenze

Task consente un approccio modulare per la configurazione di Gulp. Dobbiamo creare un'attività per ogni dipendenza, che aggiungeremo man mano che troviamo e installiamo altri plugin. L'attività Gulp avrà la seguente struttura:

gulp.task('task-name', function() {
   //do stuff here
});

Dove "nome-attività" è un nome di stringa e "funzione ()" esegue l'attività. "Gulp.task" registra la funzione come attività all'interno di nome e specifica le dipendenze da altre attività.

È possibile creare l'attività per la dipendenza definita sopra come mostrato nel codice seguente.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Le immagini si trovano in src/images/**/*che viene salvato in img_srcobject. Viene reindirizzato ad un'altra funzione creata dal costruttore di imagemin. Comprime le immagini dalla cartella src e copiate nella cartella build chiamandodest metodo con un argomento, che rappresenta la directory di destinazione.

Esecuzione dell'attività

Il file Gulp è configurato e pronto per l'esecuzione. Utilizzare il seguente comando nella directory del progetto per eseguire l'attività:

gulp imagemin

Eseguendo l'attività utilizzando il comando precedente, vedrai il seguente risultato nel prompt dei comandi:

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)