Gulp сборка для верстки сайтов. Обзор task менеджера Gulp и написание сборки. Работа с шаблонами в HTML, SASS / SCSS, авто-префиксы, минификация кода, scss glob. Сборка JS с помощью webpack, babel. Оптимизация изображений, автоматическое создание и подключение webp. Две версии сборки для разработки и оптимизированная production версия. Стартовый проект для html верстки.
Готовый код сборки: [ Ссылка ] (пост за 28 Июня 2023)
Чат верстальщиков ВебКадеми: [ Ссылка ]
Подробно с пошаговыми объяснениями для новичков и начинающих.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: [ Ссылка ]
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: [ Ссылка ]
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 14 Октября 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": [ Ссылка ]
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 21 Октября 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
[ Ссылка ]
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: [ Ссылка ]
💈 Вступайте в группу Вконтакте: [ Ссылка ]
💈 Подписывайтесь на Telegram: [ Ссылка ]
Тайм коды:
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 сборку. Мои авторские курсы
Сайт: [ Ссылка ]
Вконтакте: [ Ссылка ]
Telegram канал: [ Ссылка ]
