Optimizarea Imaginilor folosind Gulp

In acest articol am sa va arat cum puteti optimiza imginile, astfel incat sa se incarce mai rapid.

Instalare plugin de optimizare a imaginilor

Din terminal, mergem in folder-ul proiectului si instalam 'gulp-changed' si 'gulp-imagemin' folosind comanda:

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

Declararea de dependinte si crearea de taskuri

In fisierul de configurare, gulpfile.js declaram dependintele astfel:

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(){});

Taskul imagemin va accepta png, jpg si gif din fodlerul src/images si le va procesa si muta in noua destinatie. 

Metoda changed() se asigura ca de fiecare data cand este rulat acest plugin va lua numai fisierele noi.

Rularea taskurilor

Fisierul de configurare este pregati si functioneaza perfect, deci am putea rula aceasta comanda in terminal:

gulp

Dupa ce am rulat comanda ar trebui sa vedem acest cod in

C:\invata-programare>gulp
[15:55:49] Using gulpfile C:\invata-programare\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%)