Урок по написанию Gulp сборки для верстки сайтов.
- Обзор task менеджера Gulp и написание сборки.
- Работа с шаблонами в HTML,
- SASS / SCSS, авто-префиксы, минификация кода, автоподключение scss с помощью gulp-sass-glob.
- Сборка JS с помощью webpack, babel.
- Оптимизация изображений, автоматическое создание и подключение webp.
- Две версии сборки для разработки и оптимизированная production версия.
- Стартовый проект для html верстки.
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
Видео урок
Материалы к уроку
Описание базовых пакетов:
gulp — собственно Gulp
gulp-sass — Сборка SASS / SCSS
sass — Необходим для сборки SASS / SCSS
gulp-file-include — Подключение файлов друг в друга. HTML include
gulp-clean — Удаление файлов
gulp-server-livereload — Сервер с автообновлением страницы
gulp-sourcemaps — Исходные карты для CSS
gulp-plumber — Фикс ошибок при сборке
gulp-notify — Нотификации
gulp-group-css-media-queries — Группировка CSS медиа запросов
webpack-stream style-loader css-loader — сборка JS
gulp-babel @babel/core @babel/preset-env — babel для JS
gulp-imagemin@7 — сжатие изображений
gulp-changed — отслеживание изменений в файла
gulp-webp gulp-webp-html gulp-webp-css — работа с webp
Ссылки
- Сайт node js — nodejs.org
- Сайт с npm пакетами — npmjs.com
- Установка Git — git-scm.com
- GitHub — github.com
Готовый код с урока
- Готовый код сборки в Telegram канале: https://t.me/+9XtDDNBdHAk4Yjhi
(пост за 28 Июня 2023) - Чат верстальщиков ВебКадеми: https://t.me/+QAxmsKj2HyWfEKzz
