GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

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

Если возникает ошибка: "[HTML] Error: Callback called multiple times"...
Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов.

Оновився плагін, зараз треба писати
import deleteAsync from "del";

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

➕ Плагины от зрителей: gulp-cache, gulp-sharp-responsive

00:00:00 - Что умеет Gulp?
00:00:40 - Подготовка к работе. NodeJS, GIT Bush
00:04:58 - Установка GULP. Глобально и в проект
00:06:42 - Структура файлов и папок. Архитектура сборки
00:10:23 - Копирование файлов
00:16:45 - Настройка наблюдателя (watch)
00:20:31 - Очистка папки с результатом
00:22:51 - Обработка HTML/PUG файлов
00:46:09 - Локальный сервер. Автообновление страницы.
00:49:59 - Обработка SASS/SCSS/CSS файлов
01:03:14 - Обработка JavaScript файлов. WEBPACK
01:10:15 - Оптимизация картинок. Создание WEBP
01:17:36 - Конвертация шрифтов. Запись в файл стилей.
01:25:49 - Создание SVG спрайтов.
01:30:37 - Режимы разработчика (dev) и продакшн (build)
01:37:03 - Создание ZIP архива с результатом
01:39:47 - Выгрузка результата на сервер по FTP
01:44:20 - Использование Gulp сборки для нового проекта
01:46:21 - Заключение

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

#обучение #gulp #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©

[default]

Для тех у кого не работает плагин del на новой версии, вставляем это в reset:

import {deleteAsync} from "del"
export const reset = () => {
return deleteAsync(['dist'])
}

[androiddecolt]

01:21:57 строчка fs.appendFile отображена не полностью. Отображаю:

[olgagolovko]

Спасибо ОГРОМНЕЙШЕЕ за то, что ты щедро делишься с нами своими наработками))
Сама я бы это год разбирала🙃

[olgaboiko]

Сборка супер! Все получилось и работает! Главное внимательность. Евгений, большущее спасибо вам за вашу работу! Сил и процветания в дальнейшем!!!

[wfnpnec]

Жека, это мощща!
Вопросы, которые накапливались исчезли при просмотре видоса. Сборка агонь! Спасибо за твои труды. И за то, что ты ленивый и оптимизацию такую делаешь)))

[Ruslan-nimh]

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

[GT__]

*Позавчера начал смотреть старое видео про Gulp, не успел досмотреть, и вышло свежее видео. Это такая удача для меня! Спасибо большое, Евгений)*

[BMikel]

Это канал на вес золота. Топ контент. Надо приложиться все усилия чтоб количество подписчиков выросло до 15 млн

[serdar]

Жека привет а считаю наоборот канал не пострадает , а ты просто красавчик признаешь свои ошибки и так заботишься о своей аудитории Спасибо Тебе и Всего Наилучшего

[iventeye]

Очень крутая сборка на 2022 год! Нравится, как Женя продумал оптимизацию и структуризацию. Огонь!🔥

[FreelancerLifeStyle]

В прошлом видео обнаружилась ошибка (неточность в установке галпа глобально), решил перезалить. Лучше пусть пострадает канал чем ваши знания! 💪

[selleniya]

Огромное спасибо за чёткую речь, правильные интонации и позитив. Вы рождённый Учитель. Нам повезло☺

[artbotguy]

Чел хорош. Не, серьёзно. Как препод точно. У тебя талант к обучению. Не зря набираешь новую группу, хотя говорил, что один только курс проведешь) Видать затянуло. У тебя рил получается. Один из лучших по подаче.

[lmggocn]

Так сложно садиться за непонятный новый материал, но по вашим видео спустя время начинаешь всё понимать, спасибо!

[zzjuymt]

Мощная сборка получилась. Спасибо за огромную проделанную работу!

[zgsjjtt]

Женя спасибо тебе огромное за эту сборку. Сил и здоровья тебе в это непростое время

[plxxxkt]

Огромное спасибо. До этого юзал сборку с предыдущего видео про GULP и сталкивался с некоторыми проблемами, которые решились тут. Спасибо Жека, что не стоишь на месте и развиваешься и даешь возможность развиваться остальным вместе с тобой!

[cbtszvp]

Ураааа!!! А то я уже расстроилась, настроение испортилось. Но теперь все снова в полном порядке!!! СПАСИБО!!!!

[azizbeksamatov]

Отличная сборка. Автору огромное спасибо за такой качественный урок. Всё коротко и чётка расставлено по полочке. Немножко жалко что дальнейшие уроки мне не понять. Но всё равно огромное спасибо. Привет из Узбекистана. 👋👋👋

[MrStanly]

Большое спасибо!! Очень подробно, очень полезно, просто пушка!!!)) С большим интересом смотрел этот видос и буду смотреть остальные!! Всем рекомендую!!