Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, автопрефиксы

Gulp сборка для верстки сайтов. Обзор task менеджера Gulp и написание сборки. Работа с шаблонами в HTML, SASS / SCSS, авто-префиксы, минификация кода, scss glob. Сборка JS с помощью webpack, babel. Оптимизация изображений, автоматическое создание и подключение webp. Две версии сборки для разработки и оптимизированная production версия. Стартовый проект для html верстки. Готовый код сборки: 9XtDDNBdHAk4Yjhi (пост за 28 Июня 2023) Чат верстальщиков ВебКадеми: QAxmsKj2HyWfEKzz Подробно с пошаговыми объяснениями для новичков и начинающих. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс “Профессия HTML верстальщик“: Старт обучения: 12 Февраля 2024 года Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс “JS Frontend разработчик“: Старт обучения: 19 Февраля 2024 года Обучение с наставником, 3 месяца, результат, гарантия. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ 7 уроков по 30 мин: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм коды: 00:00 Введение 01:07 Теория. Что такое Gulp 09:18 Мой курс по JS frontend разработке 09:54 Установка Node JS 11:24 Создание проекта, установка первых пакетов 16:01 Установка gulp-cli 17:20 Gulp file и основы Gulp 21:07 Структура проекта 25:01 Готовая структура проекта 25:38 Сборка HTML gulp-fileinclude 33:23 Компиляция SCSS 36:23 Копирование изображений 38:51 Запуск сервера gulp-server-live-reload 41:14 Ctrl C остановка процесса в терминале 41:41 Удаление папки dist - gulp-clean 48:04 Переименовываем таски 48:33 Watch. Слежение за файлами 53:15 Дефолтный таск. Запуск сборки 57:13 Исходные карты для CSS. gulp-sourcemaps 1:00:07 Группировка медиа запросов gulp-group-css-media-queries 1:03:43 Обработка ошибок и нотификации. gulp-plumber gulp-notify 1:09:32 Копирование шрифтов и файлов 1:11:40 Папка node_modules и .gitignore 1:13:42 Оптимизация настроек для plumber и notify 1:16:20 Сборка JS модулей и webpack. webpack-stream 1:24:19 Babel. Поддержка нового JS в старых браузерах 1:26:27 Разные JS файлы для разных страниц 1:30:58 JS модули. Пример подключения 1:32:19 NPM пакеты в верстке. Пример подключения. Календарь datepicker 1:36:17 Сжатие изображений. gulp-imagemin 1:39:20 Ускорение работы. gulp-changed 1:44:13 HTML таск. Внутренние страницы 1:50:00 HTML таск. Исключаем папку blocks из сборки в dist 1:51:20 Автоматическое подключение SCSS. gulp-sass-glob 1:54:05 2 версии сборки. DEV версия 2:00:21 Production версия сборки. Docs таск 2:01:26 Очистка dev версии 2:03:55 Настройка путей и имена задач в docs таске. Задача gulp docs 2:06:09 Автопрефиксы для CSS. gulp-autoprefixer 2:10:24 Минификация CSS. gulp-csso 2:11:34 Сжатие HTML. gulp-htmlclean 2:13:15 Автогенерация webp изображений. gulp-webp 2:16:20 Автоподключение webp в HTML. gulp-webp-html 2:19:58 Автоподключение webp в CSS. gulp-webp-css 2:22:29 Правка для gulp-changed в html таске 2:24:45 Обзор стартового проекта 2:40:08 Как передавать проект заказчику 2:42:33 Пример публикации проекта на GitHub Pages 2:45:27 Описание проекта на GitHub. 2:47:59 Где скачать gulp сборку. Мои авторские курсы Сайт: Вконтакте: Telegram канал: