Gulp - Combinare i compiti

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

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

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

Installazione di plugin

Prendiamo un plugin chiamato minify-cssper unire e minimizzare tutti gli script CSS. Può essere installato utilizzando npm come mostrato nel seguente comando:

npm install gulp-minify-css --save-dev

Per lavorare con "gulp-minify-css plugin", è necessario installare un altro plugin chiamato "gulp-autoprefixer" come mostrato nel seguente comando:

npm install gulp-autoprefixer --save-dev

Per concatenare i file CSS, installa gulp-concat come mostrato nel seguente comando:

npm install gulp-concat --save-dev

Dopo l'installazione dei plugin, è necessario scrivere le dipendenze nel file di configurazione come segue:

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Aggiunta di attività al file Gulp

Dobbiamo creare un'attività per ogni dipendenza, che aggiungeremo durante l'installazione dei plugin. L'attività Gulp avrà la seguente struttura:

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Il plug-in "concat" concatena i file CSS e il plug-in "autoprefix" indica la versione corrente e quella precedente di tutti i browser. Minifica tutti gli script CSS dalla cartella src e li copia nella cartella build chiamando il metodo "dest" con un argomento, che rappresenta la directory di destinazione.

Per eseguire l'attività, utilizzare il seguente comando nella directory del progetto:

gulp styles

Allo stesso modo, utilizzeremo un altro plugin chiamato 'gulp-imagemin' per comprimere il file immagine, che può essere installato utilizzando il seguente comando:

npm install gulp-imagemin --save-dev

È possibile aggiungere dipendenze al file di configurazione utilizzando il seguente comando:

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

È possibile creare l'attività per la dipendenza sopra definita 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 vengono salvate nell'img_srcobject. Viene reindirizzato ad altre funzioni create dal costruttore "imagemin". Comprime le immagini dalla cartella src e le copia nella cartella build chiamando il metodo "dest" con un argomento, che rappresenta la directory di destinazione.

Per eseguire l'attività, utilizzare il seguente comando nella directory del progetto:

gulp imagemin

Combinazione di più attività

È possibile eseguire più attività contemporaneamente creando un'attività predefinita nel file di configurazione come mostrato nel codice seguente:

gulp.task('default', ['imagemin', 'styles'], function() {

});

Il file Gulp è configurato e pronto per l'esecuzione. Esegui il seguente comando nella directory del tuo progetto per eseguire le attività combinate sopra:

gulp

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

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images