Урок Оптимизация изображений

[TaLLeR43]

Рейтинг темы

4.00 звёзд

Как вы, наверное, уже догадались, нам потребуется gulp-imagemin, который поможет с оптимизацией изображений.

$ npm install gulp-imagemin --save-dev

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

При помощи gulp-imagemin мы можем минимизировать файлы png, jpg, gif и даже svg. Давайте создадим задачу images для этого процесса оптимизации.

gulp.task('images', function(){
return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin())  
.pipe(gulp.dest('dist/images'))
});

Поскольку разные типы файлов могут быть оптимизированы по-разному, вы можете добавить параметры в imagemin для настройки способа оптимизации каждого файла. К примеру, для создания чересстрочных GIF-файлов установите значение параметра interlaced как true.

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

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

gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)'</span>)
    // Кэширование изображений, которые проходили через imagemin
    .pipe(cache(imagemin({
      interlaced: true
    })))

.pipe(gulp.dest('dist/images'))
});

Мы практически завершили процесс оптимизации. Осталась только одна папка, которую нам нужно перенести из app в dist — это папка со шрифтами.