Прокачал сборку Gulp до космических скоростей: как экономить время на сжатии картинок ⚡️

Помните мой недавний пост про боль со сжатием картинок? Так вот, я пошел дальше.
Раньше при каждом запуске таска gulp images сборщик послушно шуршал по всей папке src и заново пережимал ВСЕ картинки. Когда их две-три — пофиг. Но когда проект разрастается, сидеть и ждать по 15–20 секунд на каждый чих — это непозволительная роскошь для нервной системы.
Поэтому я внедрил в сборку плагин gulp-newer.

В чём фишка: Он сравнивает файлы в исходниках (src) и в готовой папке (dist). Если картинка уже была сжата и не менялась, Gulp её просто пропускает. На обработку отправляются только новые или измененные файлы.

Результаты теста (закинул 1 новую картинку):
Было: ~13 секунд (Gulp пересжимал вообще всё)
Стало: 876 миллисекунд! 🚀 (меньше секунды!)

Таск convertWebp теперь пролетает за 213 мс, а imagemin обрабатывает ровно 1 новый файл, экономя кучу времени.
Сборка официально стала летать, а я сэкономил себе часы ожидания в будущем. Юзайте gulp-newer, берегите свои нервы! 😎

Ребят, смотрите, как теперь работает автосжатие. Я просто закидываю новую картинку в папку, Gulp её моментально ловит, пережимает меньше чем за секунду и сам генерирует WebP. Больше никаких ожиданий по полминуты!

Добавил в свою сборку сжатие шрифтов в .woff / .woff2 / ttf форматы , запарился немного, но на опыте с картинками я знаю, что { encoding: false } в помощь.

❗️ Воюю с Gulp ❕

Заметил кучу багов в своей старой сборке, из-за которых файлы сильно раздувались в весе при финальном деплое:

1️⃣ Картинки увеличивались в размере в папке dist.
2️⃣ Шрифты тоже раздувались при копировании.
3️⃣ SVG-спрайты ломались и весили больше положенного.

Решил сделать полный откат и начал переписывать таски почти с нуля. На данный момент сжатие CSS, JS и компиляция SCSS уже работают как раньше на ура.

🚀 Что нового: уже полностью пофиксил первый пункт с картинками! Нашел баг с кодированием бинарников и двойным сжатием потока — теперь всё улетает в dist идеально оптимизированным.
Да, пришлось снести прошлые коммиты, но лучше переписать таски заново и начисто, зато теперь я на 100% уверен в каждом таске. Дальше по плану — шрифты и спрайты! 💻

🚀 Проблемы решены!

Наконец-то до конца докрутил таск билда (building) в своей Gulp-сборке. Раньше папка dist немного забивалась мусором, но теперь всё работает отлично.

Что пофиксил и настроил:
Шрифты: Теперь в финальный билд летят строго сжатые форматы .woff и .woff2, никакой тяжелой исходной папки src.
Картинки: Прописал точечно (png, jpg, webp) — в dist больше не пролезает ничего лишнего.
SVG-спрайт: Укротил плагин картинок. Теперь в билд закидывается только один готовый, сжатый sprite.svg, а техническая папка stack со всеми дублями автоматически вычищается.
Качество: Самое главное — все файлы сохраняют свой сжатый формат байт-в-байт и не раздуваются обратно при копировании.

Код таска получился чистым. Кому интересно глянуть структуру или саму сборку, залил всё на GitHub:

👉 Здесь

Впереди еще много планов, следите за новостями! 🛠🔥

Разработка идет полным ходом 🧑‍💻

Угадаете , что сейчас делаю?

Сборка на Gulp практически готова! 🚀

Я довел до идеала свою сборку , все работает быстро и отлично, как часы.
Осталось поправить парочку моментов , но работа сборки на это никак не влияет, а именно:

1️⃣ донастроить итоговую папку dist.
2️⃣ поработать с путями , куда будут складываться сжатые картинки, шрифты, svg-спрайты, компоненты.

Сборкой можно активно пользоваться, инструкцию по использованию можно будет найти на моем GitHub в файле README в ближайшее время.

Дальше — чистый фокус на JS и подготовка к Vue! 💪

То, чем я занимался 3 часа , это было круто 😵‍💫

и не только этим 😏

В режиме разработки стили вшиваются прямо в DOM, чтобы работало мгновенное обновление без перезагрузки страницы. А для продакшена Webpack сам аккуратно выносит весь CSS в отдельный сжатый файл с хэшем!

import MiniCssExtractPlugin from "mini-css-extract-plugin";

const isDev = env.mode === "development";
const isProd = env.mode === "production";

isProd &&
  new MiniCssExtractPlugin({
    filename: "css/[name].[contenthash:8].css",
    chunkFilename: "css/[name].[contenthash:8].css",
  }),

rules: [
  {
    test: /\.s[ac]ss$/i,
    use: [
      isDev ? "style-loader" : MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader",
    ],
  },
]

Ночной кодинг 🌙⚡️
Решил собрать свою собственную сборку на Webpack. Понятно, что сейчас все юзают Vite, но мне хочется досконально понять, как всё устроено под капотом — лоадеры, плагины, декомпозиция, поддержка TS/TSX и SCSS.
Зачем? Хочу выстроить крепкий фундамент перед тем, как полноценно ворваться во Vue.js. Когда понимаешь, как проект собирается изнутри, любой фреймворк даётся в разы проще.
Процесс идет, сборка почти готова! 🚀

За сегодня: сделал декомпозицию сборки, делаю изоляцию стилей через css modules.🥳

За эти 2 часа в сборку добавил:

1️⃣ CSS modules
2️⃣ Роутинг
3️⃣ Ленивые чанки
4️⃣ Размер бандла
5️⃣ Bundle analyzer

Сборка почти готова 🧑‍💻🚀

Добавил Алиасы для js и ts , теперь пути будут выглядеть аккуратно