Полный цикл в digital

Работа с картинками

Используемые решения:

  1. compress-images сжатие картинок
  2. gifsicle@5.3.0 вспомогательный модуль версии 5.3.0
  3. pngquant-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
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг