Gulp сборка для верстки сайтов. Ускоряем процесс верстки сайтов. Обновление 2024

Gulp сборка для верстки сайтов. Обновление Gulp сборки. В этом видео я презентую обновленную сборку для HTML верстки сайтов. Улучшена работа с графикой. Лучшее качество при оптимизации. Что добавлено: - Умеет авто-подключать webp формат в т.ч. и для retina графики. - Собирает SVG спрайты. - Производит автогенерацию и автоподключение шрифтов. - Автозамена путей в html и scss. - Исправлен баг с ошибкой при при разрыве строки в теге img. Стартовый проект для html верстки. Добавлена документация по сборке и SCSS сниппеты для более быстрой верстки. Готовый код сборки: https://t.me/+9XtDDNBdHAk4Yjhi (пост за 5 марта 2024) Чат верстальщиков ВебКадеми: https://t.me/+QAxmsKj2HyWfEKzz Первая часть с подробным описанием как создается Gulp сборка: https://youtu.be/D_HW-tvyKKE?si=-pyCsMf7tgvZsIyN Ролик по CSS сниппетам: https://youtu.be/uvSv7_fxaU0?si=_39SpRAAdBp0wQUf Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/ ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Мои авторские курсы: 💻 Профессия HTML верстальщик Для начинающих. Курс по созданию и верстке сайтов. 👉 https://webcademy.ru/htmlstart/ 💻 Курс "Frontend разработчик. JavaScript + React" Станьте frontend разработчиком за 3 месяца. 👉 https://webcademy.ru/jscourse/ 💻 Курс "Разработка сайтов на PHP + MySQL" Сможете создавать сайты с любым функционалом. 👉 https://webcademy.ru/phpcourse/ 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт ВебКадеми: https://webcademy.ru/ 💈 Группа Вконтакте: https://vk.com/webcademy 💈 Telegram канал: https://t.me/webcademynews ТАЙМ КОДЫ: 00:00 Введение 00:56 Начало. Подготовка. Установка 06:04 Запуск сборки 08:06 Контейнеры 10:36 Быстрые медиа запросы 17:05 Фоновые изображенияв SCSS 21:52 Автоисправление путей в HTML и SCSS 24:23 Генерация SVG спрайтов 33:44 Оптимизация графики 41:03 Авто-конвертация и авто-подключение шрифтов 45:39 Gulp file include 47:11 Типограф 48:17 Сниппеты 54:00 Где скачать сборку.