я хочу научиться использовать Gulp

Начал собирать свою универсальную сборку на Gulp

Решил автоматизировать всю рутину. Пишу таски, чтобы автоматически сжимались картинки, компилировались стили, объединялись скрипты и обновлялась страница прямо в браузере во время верстки.
На фото — текущая структура gulpfile.js. Настраиваю автоматический деплой и слежку за файлами через watch. Как допишу — залью репозиторий на гитхаб.

🚀 Gulp-сборка официально готова и запушена на GitHub!

Сегодня плотно посидел и докрутил до идеала свой стартовый шаблон для фронтенд-верстки. Пришлось немного повозиться с версиями плагинов (классика Node.js), но в итоге всё завелось как надо.

Что умеет сборка на данный момент:
* Компилирует SCSS/SASS в чистый и сжатый CSS.
* Сама расставляет вендорные префиксы для старых браузеров (Autoprefixer).
* Склеивает и минифицирует JS-файлы (Concat + Uglify).
* Из коробки поддерживает адаптивный слайдер Swiper.
* Автоматически обновляет страницу в браузере при любом изменении кода через BrowserSync.

Планирую добавить оптимизацию картинок и шрифтов, но база уже полностью рабочая. Буду использовать её как донора для всех своих будущих сайтов.

Чекайте репозиторий, зацените README и код: 👉 https://github.com/xycu2/gulp-assembly

(сборку буду дополнять)

​🕹 Time to play! Запустил свою мини-игру в ТГ

​Пока все только говорят о разработке, я взял React + JS и собрал полноценное веб-приложение прямо внутри мессенджера.

Хостинг заряжен на 2 года вперёд, так что сервак точно выдержит любой наплыв! 😎

​🚀 Сыграть прямо сейчас: @VinGed_bot
📁 Посмотреть open-source код: здесь

​

Challenge:

сможете побить мой личный рекорд? Заходите в бота, тестируйте геймплей и кидайте свои скрины с результатами в комменты. Если вдруг найдёте баги — пишите, буду фиксить! 👇

​🚀 Планы на прокачку моей Gulp-сборки: avif, svg sprite и полная автоматизация!

​Всем привет! Неделю назад я закончил базовую версию своей Gulp-сборки, но и не думал её забрасывать. Проект живет! Сейчас я набрасываю план крупного обновления, которое полностью автоматизирует всю рутину по максимуму.

​Вот что я планирую добавить в ближайшее время и залить на GitHub:

​📸 Продвинутая работа с графикой: Хочу уйти от тяжелых .png и .jpg. В планах настроить автоматизацию картинок и их конвертацию не только в .webp, но и в ультра-современный формат .avif для максимального сжатия без потери качества.

​🦄 Автоматические SVG-спрайты: Хочу сделать так, чтобы все векторные иконки автоматически собирались в один оптимизированный svg sprite. Это супер-полезно для ускорения загрузки сайтов и удобства в верстке.

​⚡️ Полная автоматизация шрифтов: Больше никакого ручного конвертирования через сторонние сайты. Сборка будет сама брать исходники .ttf/.otf, переводить их в веб-форматы .woff и .woff2 и автоматически подключать в стили.

​🪵 Компонентный подход (include файлов): Настрою сборку HTML так, чтобы можно было разбивать код на отдельные кусочки (шапка, подвал, блоки) и легко инклудить их в нужные страницы.

​Скоро засяду за код, реализую всё это и обновлю репозиторий. Как вам такой набор фич? Что бы вы еще добавили в идеальную сборку? 👇

Логи за день: победил капризный Gulp и настроил сжатие картинок 🛠🧑‍💻

Сегодня был плотный бой со сборщиком. Задача минимум выполнена — настроил автоматическую оптимизацию графики для будущих проектов, но не обошлось без приключений.

Что сделано:
✅ Полностью победил проблему с импортами старых и новых ES-модулей в Node.js (привет [Module: null prototype] и костылям с .default).
✅ Разбил единый тяжелый таск обработки изображений на независимые потоки — код теперь чистый, логичный и масштабируемый.
✅ Настроил автоматическую генерацию современных WebP картинок и жесткое сжатие оригиналов (PNG/JPG) через gulp-imagemin. Всё летает и компилируется за пару секунд!

Стена, в которую уперся: Связка с gulp-avif наотрез отказалась заводиться. Постоянно сыпалась системная ошибка Input buffer contains unsupported image format. Опытным путем проверено: переименование файлов, очистка метаданных и фильтрация скрытого мусора через фигурные скобки {png,jpg,jpeg} не помогли.
Судя по всему, баг сидит глубоко внутри самого плагина или его бинарника avifenc, который конфликтует с моим окружением Node.js.

План действий: Пока что просто исключил AVIF из параллельного таска. Связки WebP + сжатый PNG/JPG для современных сайтов сейчас хватает с головой. Чуть позже, на свежую голову, попробую докопаться до этой проблемы (может, через откат версий или пересборку нативных модулей), а пока — сборка работает без ошибок, файлы жмутся, и это победа! 🚀

Прокачал сборку 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! 💪