Работа с картинками
Используемые решения:
compress-images
сжатие картинокgifsicle@5.3.0
вспомогательный модуль версии 5.3.0pngquant-bin@6.0.0
вспомогательный модуль версии 6.0.0
Давайте установим плагины одной командой:
npm i --save-dev compress-images gifsicle@5.3.0 pngquant-bin@6.0.0
Для начала определим константы и переменную в gulpfile.js
:
gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем compress-images для работы с изображениями
const imagecomp = require("compress-images");
// подключаем модуль gulp-clean (вместо del)
const clean = require("gulp-clean");
Теперь создадим функцию images()
, которая будет оптимизировать картинки:
gulpfile.js// определяем логику обработки картинок
async function images() {
imagecomp(
// берём все изображения из папки источника
"app/images/src/**/*",
// выгружаем оптимизированные изображения в папку назначения
"app/images/dest/",
// настраиваем основные параметры
{ compress_force: false, statistic: true, autoupdate: true }, false,
// сжимаем и оптимизируем изображеня
{ jpg: { engine: "mozjpeg", command: ["-quality", "75"] } },
{ png: { engine: "pngquant", command: ["--quality=75-100", "-o"] } },
{ svg: { engine: "svgo", command: "--multipass" } },
{ gif: { engine: "gifsicle", command: ["--colors", "64", "--use-col=web"] } },
)
}
- Выбираем все файлы из источника
- Определяем папку назначения (выгрузки сжатых изображений)
- Основные опции модуля сжатия изображений
- Сжатие различных типов файлов разными движками
- По завершении обновляем страницу браузера
Для того, чтобы получить готовый к запуску таск, функцию или комбинацию функций необходимо экспортировать, далее допишем:
gulpfile.js// экспортируем функцию images() в таск images, значение после знака = это имеющаяся функция
exports.images = images;
Запускаем таск командой:
gulp images
Запуск в автоматическом режиме
Давайте сделаем так, чтобы при сохранении картинок, происходило автоматическое сохранение файлов. Для этого создадим новую функцию startwatch()
, которая запустит наблюдение за изменениями папок. Данную функию позже мы добавим в дефолтный экспорт для запуска вотчинга при старте:
gulpfile.js// автозапуск
function startwatch() {
// мониторим папку-источник изображений и выполняем images(), если есть изменения
watch("app/images/src/**/*", images);
}
Для того, чтобы наша функция startwatch()
заработала и начала выполнять полезную работу, ее необходимо добавить в дефолтный экспорт:
gulpfile.js// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(startwatch);
Полный gulpfile.js
gulpfile.js// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем compress-images для работы с изображениями
const imagecomp = require("compress-images");
// подключаем модуль gulp-clean (вместо del)
const clean = require("gulp-clean");
// автозапуск
function startwatch() {
// мониторим папку-источник изображений и выполняем images(), если есть изменения
watch("app/images/src/**/*", images);
}
// определяем логику обработки картинок
async function images() {
imagecomp(
// берём все изображения из папки источника
"app/images/src/**/*",
// выгружаем оптимизированные изображения в папку назначения
"app/images/dest/",
// настраиваем основные параметры
{ compress_force: false, statistic: true, autoupdate: true },
false,
// сжимаем и оптимизируем изображеня
{ jpg: { engine: "mozjpeg", command: ["-quality", "75"] } },
{ png: { engine: "pngquant", command: ["--quality=75-100", "-o"] } },
{ svg: { engine: "svgo", command: "--multipass" } },
{ gif: { engine: "gifsicle", command: ["--colors", "64", "--use-col=web"] } }
);
}
// экспортируем функцию images() в таск images, значение после знака = это имеющаяся функция
exports.images = images;
// экспортируем дефолтный таск с нужным набором функций, значение после знака = это имеющаяся функция
exports.default = parallel(startwatch);
Запускаем таск командой:
gulp