Gulp - Ottimizzazione delle immagini

In questo capitolo imparerai come ottimizzare le immagini. L'ottimizzazione ridurrà le dimensioni delle immagini e faciliterà il caricamento.

Installa plugin per ottimizzare le immagini

Vai alla directory "work" dalla riga di comando e installa i plugin "gulp-changed" e "gulp-imagemin" utilizzando i seguenti comandi.

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Dichiarare le dipendenze e creare attività

Nel tuo file di configurazione gulpfile.js, per prima cosa dichiara le dipendenze come mostrato nel comando seguente.

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

Successivamente, è necessario creare attività per l'ottimizzazione delle immagini come mostrato nel codice seguente.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

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

Il imageminl'attività accetterà immagini png, jpg e gif dalla cartella src / images / e le minimizzerà prima di scriverle nella destinazione. Ilchanged()assicura che solo i nuovi file vengano passati ogni volta per la minimizzazione. Il plug -in modificato da gulp elaborerà solo i nuovi file e quindi utilizzerà tempo prezioso.

Esegui le attività

Il file di configurazione è impostato e pronto per l'esecuzione. Utilizzare il seguente comando per eseguire l'attività.

gulp

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

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)