GULP - ПОЛНЫЙ КУРС 2024 | УДОБНАЯ СБОРКА САЙТА | УСТАНОВКА И НАСТРОЙКА

Это максимально подробный большой видеоурок по настройке с нуля Gulp 4 для начинающих, в нём по шагам объясняется, как правильно и без ошибок установить и настроить сборщик (таскраннер) Gulp.


После изучения курса, вы сможете сами создавать удобные сборки Gulp для любых ваших задач, и сможете понимать, как всё устроено в конфигурационных файлах.

Сборка обновлена и построена на основе устаревшей сборки Gulp Дмитрия Валака (канал BrainsCloud), с объяснением и уточнением многих моментов.

В этом видео:
0:00 Что такое Gulp и зачем он нужен
4:30 Установка Node JS
6:52 Установка Git Bash
9:49 Как установить Gulp глобально
10:51 Создание папки для Gulp-проекта
19:20 Установка модулей/плагинов для Gulp
19:55 Плагин Gulp-Autoprefixer | Установка и зачем он нужен
22:14 Плагин Gulp-CSSBeautify | Установка и зачем он нужен
23:21 Плагин Gulp-Strip-CSS-Comments | Установка и зачем он нужен
24:16 Плагин Gulp-Rename | Установка и зачем он нужен
25:21 Плагин Gulp-Sass | Установка и зачем он нужен
25:40 Ошибка Gulp-Sass | Решение ошибки
27:25 Плагин Gulp-CSSnano | Установка и зачем он нужен
28:08 Плагин Gulp-Rigger | Установка и зачем он нужен
29:14 Плагин Gulp-Uglify | Установка и зачем он нужен
29:30 Плагин Gulp-Plumber | Установка и зачем он нужен
30:22 Плагин Gulp-Imagemin | Установка и зачем он нужен
31:02 Ошибка Gulp-Imagemin | require is not defined in ES module
33:17 Плагин Del | Установка и зачем он нужен
33:54 Ошибка плагина Del
34:43 Плагин Panini | Установка и зачем он нужен
35:31 Плагин BrowserSync | Установка и зачем он нужен
36:16 Удобная структура проекта
39:15 Сonst Path | Настройка путей к папкам проекта
49:51 Таск HTML | Настройка GULP-Тасков
58:07 Таск CSS | Настройка GULP-Тасков
1:07:31 Таск JS | Настройка GULP-Тасков
1:13:43 Таск IMAGES | Настройка GULP-Тасков
1:20:01 Таск CLEAN | Настройка GULP-Тасков
1:24:10 Таск FONTS | Настройка GULP-Тасков
1:33:45 Настройка BrowserSync | Live Reload | Локальный сервер
1:39:33 Gulp-Nofify | Красивое отображение ошибок | Установка, настройка
1:45:23 Плагин Panini | Как установить, настроить
1:48:20 Плагин Panini | Шаблоны, разбиение HTML на части | Layouts Partials
1:55:41 Плагин Panini | Как работать с Data JSON
1:59:03 Перенос настроек Gulp в новый проект
2:03:59 Заключение

[coderfolder]

3) В видео использую консоль Git Bash, так как она классно подходит для Gulp (быстро работает) и на случай, если вы используете легкий редактор кода без встроенной консоли (например: Sublime Text)
4) Заранее извиняюсь за мелкий шрифт, канал новый, не учел данного нюанса, в следующих видео исправлюсь.

[veetkachev]

даже у "Фрилансера по жизни " не на столько понятно и доходчиво )) мучался с ошибками, теперь всё ясно !

[AndCheb]

Хоть одно адекватное объяснение на ютубе. Спасибо за видео, так держать!

[yutyxgp]

Вот он клад который я искал)
Всё по полочкам! Разбирался 2 дня и вёл конспект для себя, чтобы разобраться) Просто великолепный материал. Буду всем советовать ваш канал! Вы огромный молодец! Удачи в процветании канала👏

[reutoffreutoff]

Хорошо объяснил принцип работы галпа, собственно только теперь мне стала понятна каждая строчка кода, и что главное, сама сборка, как мне кажется, сделана в классическом стиле, без всяких лишних и непонятных наворотов, тут даже ребенок разберется. Лайк однозначно!

[mdvbGreen]

Спасибо большое, очень классно всё объяснили. Наконец-то gulp работает)))
Автор, у Вас, очень классно получается объяснять понятным языком.
И что лично для меня является важным, Вас хочется слушать)))
Успехов)))

[Pravdarub]

Хоть я и ругал тебя всю дорогу за мелкий шрифт, но сборка (и её копия на другом проекте) работает! Спасибо!

[ouoqfgj]

Низкий поклон за Вашу работу! Успехов и процветания!!!

[mondayNice]

Божечки-кошечки, как же ты объясняешь, мил человек. Кланяюсь в ноги. Не переставай только, делись знаниями своими великими 😍

[TheLittleMaksik]

Подписка, лайк и все остальное!!! Ценим и уважаем ваш труд! Продолжайте! Это очень качественный контент простыми, понятными словами!

[eknjvzk]

Спасибо за подробный видос)
Мне кажется, проще писать во встроенном терминале VS Code -- не нужно переходить между каталогами и удобно создавать несколько терминалов, + там можно выбрать bash)

[romario]

Спасибо за сжатый, емкий материал. Очень полезно для НЕ новичков или кто работает с разными сборками. Быстро посмотреть и что то вспомнить для верстки различных проектов, не тратить время на поиски

[al_pav]

Очень крутой видеоурок. есть видео о настройке gulp и у других ютуберов, но доступней чем ты никто не объясняет. Хотел уже забросить установку и настройку gulp но наткнувшись на твой видос решил попробовать последний раз))). и у меня получилось. не сразу... потратил на это минимум три дня. без знания js. но я это сделал. Спасибо тебе огромное. могу только догадываться сколько трудов тебе стоило сделать такой видос. Низкий поклон.

[vladislavpolshin]

Спасибо тебе за проделанную работу, за твой труд, видео очень подробное и понятное.

[jetacc]

Алоха, кодэры!)
Автор ты - лучший!!!! Респект тебе и уважуха!
Несказанно рад что нашел это видео, оно сэкономило мне уйму времени! Это самый крутой разбор по GULP что я видел, а я много херни пересмотрел)
Подписался, надеюсь продолжишь радовать контэнтом!

[kqbrdjm]

Огромное спасибо за сборку!!!
Это именно то, что я искал. Нигде не мог найти как сохранить "красивый" и "минимизированный" файл того же CSS и JS .
Да и сама настройка самая понятная из всех.
Только 1 момент со стилями, browserSync обновляет index страницу, на другой странице приходится вручную обновлять браузер, чтобы увидеть изменение стилей, хотя при изменении html проблем нет.

[webDevNinjaBackInFrontEnd]

Топово, реально
С начала пика js прошло 3 года, по старым видосам сложно настраивать
А тут свежак огонь❤

[irinakirichenko]

Огромное спасибо за такую работу! Многое стало понятно. Успехов в развитии канала, ждём новых тем))

[AntonioBenderas]

Крутотень, весь ютуб пересмотрел и только у тебя понятно что к чему. Вот бы ещё по Webpack

[oxuwjef]

Все кто застрял на images: В свойствах src и wath объекта path нужно добавить расширение jpg, тк у автора прописан там только jpeg. Также желательно поставь jpg с самого начала, что бы выглядело примерно так: images:
srcPath +
`assets/images/**/*.{jpg, jpeg, png, svg, gif, webp, ico, xml, json, webmanifest}`,