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

Опубликовано: 12 Октябрь 2024
на канале: ВебКадеми | Юрий Ключевский

52,193

1.7k

Gulp сборка для верстки сайтов. Обзор task менеджера Gulp и написание сборки. Работа с шаблонами в HTML, SASS / SCSS, авто-префиксы, минификация кода, scss glob. Сборка JS с помощью webpack, babel. Оптимизация изображений, автоматическое создание и подключение webp. Две версии сборки для разработки и оптимизированная production версия. Стартовый проект для html верстки.

Готовый код сборки: https://t.me/+9XtDDNBdHAk4Yjhi (пост за 28 Июня 2023)
Чат верстальщиков ВебКадеми: https://t.me/+QAxmsKj2HyWfEKzz

Подробно с пошаговыми объяснениями для новичков и начинающих.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 14 Октября 2024 года.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 21 Октября 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

Тайм коды:

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. readme.md
2:47:59 Где скачать gulp сборку. Мои авторские курсы

Сайт: https://webcademy.ru/
Вконтакте: https://vk.com/webcademy
Telegram канал: https://t.me/webcademynews