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

Наконец-то до конца докрутил таск билда (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 , теперь пути будут выглядеть аккуратно

Я изучаю Vue! 🥳
Настроил окружение и создал папку для нового проекта. В ближайший месяц буду пилить на нём полноценное веб-приложение — интернет-магазин кофе ☕️
Радует, что фреймворк берёт на себя всю рутину с DOM и делает разработку в разы быстрее. Дальше — больше! 🚀

Что сделано:

1️⃣ Настроил роутеры во Vue, теперь переключение между страницами происходит без перезагрузки , контент генерируется динамически.
2️⃣ Добавил роутеры только для 2-х страниц, для других добавлю позже.

Сделал то же самое с карточками товара

Разобрался с динамическим импортом компонентов для роутера! Теперь компонент будет загружаться только тогда, когда пользователь перейдёт по определённому URL-адресу.

🚀 Переношу проект на Vue 3!
Решил отрефакторить свой старый проект и переписать его на Vue.

Что уже сделал:
Разбил верстку на компоненты (TeamCard и Navbar).
Вынес данные участников в реактивный массив ref() и вывел карточки через v-for.
Передал данные через props в дочерний компонент.
Подключил Роутеры.

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

🚀 Переписал старый Bootstrap-проект на Vue 3!

Полноценно перевёл сайт в SPA всего за 2 часа. Это моё первое самостоятельное веб-приложение на Vue!

Что сделал в процессе:
Разбил верстку на независимые компоненты.
Настроил Vue Router с динамическим импортом страниц (lazy loading).
Реализовал передачу данных через defineProps и директивы (v-for, :src, :class).

Следующий шаг вынести хранение данных из компонентов в Pinia.
Двигаемся дальше по плану! 💻🔥

🔥 Сделал документацию для своей Gulp-сборки!

Написал подробную и понятную инструкцию по использованию моей Gulp сборки прямо в README.md на GitHub.

Что умеет сборка:
⚡️ Автоматическая компиляция SCSS в CSS и автопрефиксы
🖼 Сжатие и конвертация изображений в WebP/JPG
🔤 Быстрая конвертация TTF-шрифтов в WOFF/WOFF2 в одну команду
🧩 HTML-инклюды для удобной модульной верстки
🎯 Автоматическая генерация SVG-спрайтов с визуальной шпаргалкой
🔄 Локальный сервер с автообновлением страницы (BrowserSync)

Зайти, посмотреть структуру, протестировать под свои проекты и оценить README можно по ссылке: 👉 здесь

Буду рад вашему фидбеку и звездочкам на репо! ⭐️ В скором времени сниму видеоразбор по этой сборке на YouTube.

Август всё! Вся база закрыта 💪
По планам на август закрыл вообще всё, что задумывал. Месяц выжал на максимум!

Под конец решил закрыть ещё одну мелкую, но частую рутину — написал пару лёгких .bat скриптов для автоматизации. Теперь не нужно руками прописывать одни и те же команды в консоли: запустил батник, и он сам всё делает и пушит на GitHub. Мелочь, а время и нервы экономят знатно.

Дальше — сентябрь и новые задачи. Всех с наступающим! 🔥