Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов

Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!

Спасибо за поддержку бесплатного обучающего контента!

Уточнения.
☝️imagemin следует оставлять 7й версии!
☝️ UPD 26/06/2021 - Обновился SASS, из-за этого сборки Gulp могут не запускаться.
"sass": "latest"
scss = require('gulp-sass')(require('sass'));
а также:
Обновил файлы шаблонов и сборок.
☝️ У кого проблемы с плагином WEBPCSS нужно установить converter командой -
☝️ Папка проекта не должна называться gulp
☝️ Запускать можно и отдельные функции, например gulp css
☝️ У кого копирует в dist только .jpg попробуйте немного изменить запись форматов с /*.{jpg, png, svg, gif, ico, webp} на /*.+(png|jpg|gif|ico|svg|webp)
☝️ Для WEBP-CSS следует использовать настройки: webpcss({webpClass: '.webp',noWebpClass: '.no-webp'}
☝️ WEBP-CSS выдает ошибку если в названии файла картинки есть пробелы и/или кириллица

👉 Ссылки:

👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:
👉Настройка редактора VS Code:

Содержание:
00:00 - Вступление
02:24 - Работа с терминалом (командной строкой)
04:02 - Установка Gulp глобально
06:53 - Установка Gulp в проект
10:38 - Первый запуск Gulp
11:21 - Очистка пакетного менеджера (решение проблем)
12:16 - Написание "сценария", создание переменных
19:28 - Обновление браузера
23:24 - Работа с HTML, подключение других файлов
35:20 - Удаление папки с результатом
37:04 - Работа с CSS (SASS/SCSS)
48:25 - Работа с JavaScript файлами
52:34 - Работа с изображениями, конвертация в WEBP
01:05:56 - Работа со шрифтами
01:15:16 - Запуск нового проекта
01:16:52 - Важное напутствие!

👉 Страницы плагинов:

👉JS функции и миксин из урока:

👉Решение проблем:
npm cache clean --force (очистака npm)
npm i npm -g (установка npm)

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[Toredomad]

Учителя платных курсов останутся без работы )) Спасибо огромное!

[aibulater]

Я: "О круто, пойму что такое gulp за 1 час"
*прошло 2 дня*

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

[artem_doronin]

мои мысли 4 дня назад:
"Ура! Осталось изучить gridы и gulp, и завтра-послезавтра начну учить JS!!"
После 2-х дней на gridах "че-то гемор какой-то, пойду-ка лучше gulp по-быстрому изучу"
После 2-х дней на gulpe "да твою ж мать!!!"
Благодарю за очень подробные уроки!

[mverba]

Ой, ну прям так мило)) У Жени, когда все получается - он так искренне радуется, и я радуюсь вместе с ним и сижу улыбаюсь весь ролик :D

[bpjponr]

Отличное видео! Наконец-то хороший урок по Gulp из всех что есть в интернете. Теперь я всё понял) Очень понравилась сборка! Спасибо

[Natalia]

Огромное спасибо! Это лучший урок из всех просмотренных! Вы гениальный учитель!

[zzzzzzzvvvvvvvv]

Классный учитель. На одном дыхание смотрю его. Продолжай баловать нас своими уроками. Удачи в вёрстке и в жизни. 🥳☺️

[exbukho]

Евгений, пока не нашла твой канал, учеба шла медленно, нудно и уныло... точнее, почти не шла) а тут - каждое видео вызывает "Вааааауууу, это же именно то, что нужно! Да еще и насколько доступно!" И всё получается! ты делаешь неописуемо полезное дело, огромнейшая благодарность!

[vnhogub]

Одно Ваши уроки, смотрю с большим удовольствием, доступно, понятно,

[andreiribac]

Евгений я надеюсь Вы умеете плавать, потом как очень велик риск потому в океане благодарности за это видео! Это просто замечательное обучающее пособие! Огромное спасибо и низкий поклон!

[mrstep]

Народ, я думаю, нам с вами очень повезло, что мы подписаны на этого человека. Такой золотой контент трудно найти

[fentan]

Для тех у кого проблемы с gulp-imagemin установите версию ^7.1.0
npm i gulp-imagemin@^7.1.0

[mikhailvashkevich]

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

[Blondguy]

О боги! Только задумался над тем чтобы крепко взяться за gulp, и тут Жека выпускает такой ролик! Лайк не глядя!

[Nortropb]

Ну ты талантище! Даже не представляю какую работу нужно провести перед и после записи ролика, что бы все так структурированно и понятно было. Спасибо!!!

[mgttfbm]

Круто! С каждым видео все больше хочется смотреть материал в таком позитивном стиле)

[MegaSmith]

Весь урок пролетел как одно мгновение. Большое спасибо Вам за Ваш труд!
Только начинаю изучать путь Front - End разработчика и понимаю что чем больше смотрю Ваши уроки тем сильнее моё желание учиться и изучать эту сферу!

[irina-s]

Мега крутая сборка! Думаю, это шикарный и щедрый подарок для нас, спасибо большое!
P.s. Посмотрела до конца, вся семья принимала активное участие в съёмках, очень здорово! 🤗

[tgmcbfs]

Евгений! Вы просто чудо! Какой гигантский труд! Спасибо Вам, огромное, что делитесь с нами!

[qhzvqch]

Ещё раз спасибо!!!! Нахожусь в стадии обучения верстки и, если какой-то затык или что-то новое нужно узнать - сразу к тебе на канал))) выручаешь не первый раз!!! Объясняешь доступно, вот вернулся опять к этому видео для того, чтобы в сборку добавить видосики. Пересмотрел как картинки добавлял и сделал по аналогии. СПАСИБО!!!