Як ви, напевно, вже здогадалися, нам знадобиться gulp-imagemin, який допоможе з оптимізацією зображень.
$ npm install gulp-imagemin--save-dev
<code data-language="javascript">var imagemin=require ('gulp-imagemin');За допомогою gulp-imagemin ми можемо мінімізувати файли png, jpg, gif і навіть svg. Давайте створимо завдання images для цього процесу оптимізації.
<code data-language="javascript">gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) });Оскільки різні типи файлів можуть бути оптимізовані по-різному, ви можете додати параметри в imagemin для налаштування способу оптимізації кожного файлу. Наприклад, для створення черезрядкових GIF-файлів встановіть значення interlaced як true.
<code data-language="javascript">gulp.task(' images', function(){ return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') .pipe(imagemin({ //Встановлюємо interlaced як true interlaced: true })) .pipe(gulp.dest('dist/images')) });Ви можете пограти і з іншими параметрами при бажанні.
Оптимізація зображень це досить повільний процес, який хочеться повторювати без необхідності. З цієї причини ми можемо скористатися плагіном gulp-cache.
$ npm install gulp-cache--save-dev
<code data-language="javascript">var cache=require('gulp-cache'); gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') //Кешування зображень, що проходили через imagemin .pipe(cache(imagemin({ interlaced: true })))) .pipe(gulp.dest('dist/images')) });Ми практично завершили процес оптимізації. Залишилася тільки одна папка, яку нам потрібно перенести з app в dist — це папка зі шрифтами.