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

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

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

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

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 18 Ноября 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 25 Ноября 2024 года.

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

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

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

Тайм коды:

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

[enot_poloskun]

Отличный урок автор все продумал, объяснил без лишней воды, просто мега респект.

[neleaonila]

Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня.
Пусть никогда не иссякнет доброта и мудрость в учительском сердце!

[verygood]

Спасибо огромное за ваш труд.Очень полезный курс по Gulp, однозначно лайки и подписка 😉😉

[foxy_view]

Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!

[НиколайВязьмин-ся]

Хороший урок и мастер класс. Юра ты лучший. И онлайн-школа Webcademy топ.

[beegoodb]

Большое вам спасибо Юрий за ваш труд!! Определенно куплю ваши курсы в ближайшем будущем. Все четко и по делу без лишней воды и замысловатых фраз, а главное доходчиво.

[Ctrl_C.Ctrl_V]

Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!

[illiabulgakov]

Юрий, огромное спасибо за этот видео урок! Вы очень хороший учитель, объясняет все очень просто и понятно. 👍👍👍

[amirial]

Лучшее объяснение и практика. Огромное спасибо за ваш труд! В другом месте смотрел, не понял. У вас все понятно)

[Webbrowserskilles]

Сборка вообще бомба, без воды только по делу, благодарю за такой труд, подача на высоте!

[lnelystranger]

Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs.
Спасибо за работу!

[joshuakelly]

Всем здравствия.
В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp.
Спасибо! Лайк, подписка.

[tonikova]

Спасибо за урок, было бы здорово сделать стрим и сверстать что-то на этой сборке ) Я думаю будет всем интересно )

[sad_gary]

ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!

[MsDlovar]

Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.

[sad_gary]

честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!

[redconfizbl]

огромная благодарность за данный материал. все очень структурированно и понятно

[dominicvega]

Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)

[petrpetrovich-sgjj]

Огромное спасибо за ваш труд, к сожалению на курс "JS Frontend разработчик" не смогу попасть, но следующий точно не пропущу))

[BryanskyM]

У вас всегда супер полезные уроки, спасибо