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

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

Урок по написанию 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

Ссылки

Готовый код с урока