Gulp 2024, полное руководство, современный синтаксис

[@СергейБесунов]

0:40 Что такое Gulp 3:17 Как установить Gulp 17:38 Как установить Gulp локально 20:30 Создание структуры папок 26:32 Установка плагина gulp-sass и sass 40:24 Установка плагина gulp-concat 44:40 Установка плагина gulp-uglify-es 52:00 Добавление функции watch 57:06 Установка плагина browsersync 1:10:20 Добавление функции parralel 1:17:00 Установка плагина gulp-autoprefixer 1:22:50 Как поключить несколько файлов js 1:29:55 Как подключать css из библиотек 1:34:45 Как настроить билд 1:39:05 Установка плагина gulp-clean 1:42:30 Добавление функции series 1:47:18 Как использовать сборку на практике

[@vadymprokopchuk]

Красава!

[@irinazhuravleva3609]

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

[@deadcloud8069]

Вадим! хочу поблагодарить, за то что человеческим языком ты объясняешь все, уже на протяжении многих лет)) если на горизонте появляются люди которые спрашивают меня, мол а как тут сверстать, а как тут сделать, даю им моментальную наводку на твою вечеринку))Луплю тебе ЖИРНЫЙ (прям такой с font-weight: 700) лайк)) Желаю успехов тебе и здоровья !!!

[@centralcat3325]

А чё не font weight 900?

[@deadcloud8069]

@@centralcat3325 Чтобы было к чему стремится )) на разборе webpack`а 900ый будет

[@vadymprokopchuk]

Благодарю

[@mihailmotorkin7305]

Вадим! Ты красавчик, каких не видывал KZbin. Ты делаешь сложное простым и понятным. Просто как ручка крана, открываешь и водичка течёт. Та форма подачи информации, которой ты мастерски орудуешь, как самурай катаной (с юмором и понятными терминами), льется как песТня в наши уши. И мы в ритме танца... Спасибо тебе за такую найлэпшу вечеринку. Здоровья, успехов в дизайне макетов (ждём это чудо) и только вперёд!

[@vadymprokopchuk]

Благодарю

[@mardvey859]

Спасибо, Вадим!) Ждал от Вас именно этого видоса!) Здоровья Вам и близким! :)

[@vadymprokopchuk]

Благодарю

[@ДенисАгейчев]

Благодарочка Вадиму! Начинал с твоих видео во frontend. Самый веселый и очень харизматичный человек. Твои вечерники останутся навсегда в моем сердце)) Не хватает конечно курсов по React, NextJs, NodeJs, TS и других. Огромное тебе спасибо, без тебя я бы шатался на старой не любимой работе!

[@vadymprokopchuk]

спасибо

[@Tortik-KOKO]

Думаю нужно ещё добавить шрифты, изображения, видео, аудио файлы (как их сжимать и вставлять проект). Есть же ещё модульное подключение, интересно узнать через import или require быстрее будет работать сборка. Ну и сам webpack погрызть надо, а ещё показать как его связать с gulp. Супер ролик, жду продолжение)

[@sergey_kopylov]

Огромное спасибо за уроки! Лучший на ютубе! Пусть вечеринка никогда не заканчивается!

[@Shved_2.0]

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

[@ЛюсяРыбальченко-з3ш]

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

[@vadymprokopchuk]

Благодарю

[@niakhai3659]

Да ладно , только сел искать свежее видео по gulp )))

[@vadymprokopchuk]

хух, успел отснять до момента твоего поиска =))

[@ВиталийПолещук-о9и]

Я всегда мечтал так разговаривать) По приколу все четко и понятно объясняет. Респект))!!

[@maks_tyson]

Вадим, спасибо тебе за то что ты есть! Я все обучалки по галпу пересмотрел, но так как они были загружены год назад и выше, у меня постоянно возникали ошибки на каждом этапе. Какое счастье было увидеть твое видео и повторяя твои действия, видеть что все работает. Это просто Новый Год какой то, у меня просто снос кабины от счастья! Спасибоооо :3

[@vadymprokopchuk]

огонь

[@filimon7997]

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

[@pinhusovichalexander6409]

Спасибо за подсказку!!!

[@upwlqwp]

Ещё отдельное огромное спасибо за пояснение работы на мак. Я столько мучилась при первых попытках, что-то сделать и получить в этом терминале.. не описать всю мою боль

[@vadymprokopchuk]

круть, все порешали

[@proudlord3677]

Обязательно продолжайте, Вадим. Маялась с этим галпом месяц, и вот, наконец, удалось всё установить. Спасибо!

[@vadymprokopchuk]

круть

[@lookaround9469]

Спасибо! Без воды, всё как надо! Хотелось бы в следующих видео увидеть реализацию сборки под мультистраничный сайт и подключение конкретных файлов скриптов и стилей к конкретным страницам, а не все стили и скрипты ко всем страницам:) Еще раз спасибо за труд!

[@stormbraker637]

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

[@Bamserok]

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

[@alexdrumer5933]

Вадим ,огромное спасибо за труды! Новая сборка как раз в тему зашла,это шикардосно! Ты просто красавчик!

[@upwlqwp]

Все ещё пользовалась твоей старой сборкой, пыталась пару раз перейти на чужие сборки, но твой самый понятный. Спасибо большое, что выложил обновленную версию❤

[@sezimaz]

Вадим, Вы просто чудо!!! Благодарю за знания ❤

[@SingleClutch]

*словарный запас пополнен* =)) Это наверное десятый твой ролик +- к ряду просмотренный, что то знал, что то не знал, смотрю с удовольствием все впитываю, в закладки добавляю. Спасибо!

[@yuliachamlai2024]

После таких видосов осваивать Gulp стает очень просто. Всегда жду следующих выпусков. Спасибо за такую огромную работу!

[@ОльгаК-щ2ш]

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

[@СергійКостів-д1б]

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

[@grigoriyfomenko4927]

Спасибо за отличное видео. Посмотрел до конца. GULP установил. Все работает. Жду следующую серию. Вадим, ты крут!

[@vadymprokopchuk]

молодцом

[@HakunaMatataa28]

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

[@jackkeetch5860]

Повернувся до навчання після довгої стагнації. Шкода що доступ до попередньої платформи більше не надається, там було багато інформації :) Дякую за ваш титанічний труд друже! Успіхів і натхнення вам та вашій дружині ( її уроки теж дуже корисні та інтенсивно розвивають в дизайні) о/

[@djdrey4539]

Как раз не хватало такого подробного объяснения. Спасибо большое

[@maximkhodak3268]

Вадим, спасибо! Очень жду видео с расширением сборки!

[@j-lewis]

Да-да, тоже за расширение!)

[@romanhassazhyrov5558]

Просто лучший, благодарим за то, что ты делаешь! :)

[@vadymprokopchuk]

Благодарю

[@СаидМуталибов-г5г]

скинь пож исходник ?

[@lexx7772]

Спасибо огромное!!! Так хорошо, понятно и с юмором объясняете!!! У Вас талант преподносить сложные вещи простым языком!!! Сборка отличная!!! Хочется продолжения по gulp 2023!!!

[@alexkodding9354]

Посмотрел видос как новый фильм Мстителей))) не отрываясь от манитора😅 Вадим огромное спасибо))😊

[@witalion]

Спасибо. За работу, за полезность, подробные объяснения. Отдельная благодарность за юмор. Жду дальнейших работ.

[@dimitru1776]

Дуже вам дякую. З нетерпінням чекаю наступні відео, щоб вже з оновленим галпом попрактикувати ваш багатосторінковий макет

[@antontsvil245]

Как-то случайно попал к вам на вечеринку, но уверен, что останусь :)

[@user-ly8or7ek4o]

Огромное спасибо, становится что то понятно, действительно интересно и весело смотреть=)

[@vadymprokopchuk]

Благодарб

[@Fynjn77]

спасибо, на текущий момент лучшее видео из тех что я смог найти! В каких-то моментах отходил от видео и делал как в примерах на npm к каждому пакету.

[@danilplakhotin5187]

Вадим разбор крутой Будет круто теперь марфон устроить с этой сборкой Ну и ожидаю в будущем работу с webpack увидеть 💪💪💪👍👍

[@Aleksandr-w4e]

Супер контент! Из пожеланий, хотелось бы увидеть реальный процесс передачи сайта клиенту под ключ (натяжка верстки на wp + загрузка на сервер + правильная передача клиенту) Был бы топ контент имхо

[@АндрейПотапов-ш9ц]

Спасибо тебе за объяснение сложных вещей понятным языком. Надеялся что ты уже будеш делать сборку на модулях ЕS6, с файлами конфигурации и условиями исполнения тех или иных тасок

[@Arian_9615]

Самый мощный мини-курс по Gulp, у Вас очень хорошо получается объяснить сложные вещи на понятном языке, автору моё почтение. С нетерпением жду следующие "вечеринки".

[@vadymprokopchuk]

благодарю

[@Raslambekov]

Вадим доброго времени суток! Ты просто Большой Молодец, я с Галпом давно пытаюсь подружится поскольку понял как он облегчает повседневную рутинную работу фронтовиков, и ролики по сборкам смотрел у многих но постоянно там вылазили какие то косяки возможно из-за того что это были более старые видео и что то уже работало так после обновления версий - не знаю, а вот твой урок прошел без запинки, а в твоем стиле подачи очень легко и приятно это было смотреть, спасибо тебе за твой труд, очень благодарен, надеюсь что ты продолжишь расширять эту сборку я с удовольствием сделаю ее своей основной стартовой на каждый день. P.S. С нетерпением жду нового видео по данной теме или с применением этой сборки уже в твоем практическом уроке).

[@Ronghanes]

Первый раз услышал об Gulp. Было очень интересно посмотреть. Спасибо за ролик!

[@ГульназАкчурина-ф8н]

я не могу!)) еще не досмотрела и вот хочется прям процитировать фильм "Свадьба в Малиновке": "Вы же вундеркинд! Слушайте, Вадим, и шо я в вас стала сразу такой влюбленной?!" точнее в ваш труд, юмор, и легкую подачу. ❤ вот прям с первых минут в ритме танца и не хочу никуда деваться!😄 Спасибо, Вам, ОГРОМНОЕ! все, я дальше на вечеринку))

[@alexdev209]

Годный контент! Спасибо!!!

[@maximmarinovskyi2267]

Одно из лучших видео, если не лучшее для знакомства с Gulp. Спасибо!

[@davidgrigoryan8279]

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

[@vadymprokopchuk]

все свявзано=)

[@ДмитрийКозлов-ь1ы]

Спасибо огромное. Куча материала в интернете, которые чуть ли не через раз дают ошибки. Твои уроки лучшие. Всегда все работает, все понятно и новичкам и полезно для профессионалов! Лайк пребольшой) и респект)

[@jeeep444]

Круто! Хотелось бы еще спрайт иконок что б собирал, шрифты и изображения конвертировал и переписывал ES5 в ES6

[@katenka_katrusya]

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

[@svetlanka9671]

Вас так интересно и приятно слушать что я посмотрела все видео, правда, на скорости 1.5 :). У вас очень хорошо и доступно получается излагать материал. Как говорил когда-то мой тим лид архитектору : "Объясняй мне так как будто я совсем тупой". Вот вы объясняете именно так. Спасибо за ваш труд и интересные ролики

[@vadymprokopchuk]

Благодарю

[@PerecNeDorogo]

Пушка-гонка!!! Пробовал собрать по предыдущему видео. Куча ошибок повычкакивало. С эти всё чётко получилось. Огромное спасибо за труд!!!

[@keepcalmandcodeon.]

Бомбовая вечеринка, бомбовый Вадим) Большое тебе спасибо! Жду продолжения, а ещё хотелось бы вебпак от тебя увидеть, объясняешь супер!

[@mix9455]

Для тех, у кого autoprefixer жалуется на комментарии в scss, надо вызывать scss раньше чем autoprefix: function styles() { return src('app/scss/style.scss') .pipe(concat('style.min.css')) .pipe(scss({ outputStyle: "compressed" })) .pipe(autoprefixer({ overrideBrowserslist: ['last 10 version'] })) .pipe(dest('app/css')) .pipe(browserSync.stream()) }

[@MrBenemon]

Вах, спасибо. Во вкладках лежит твой предыдущий видос про Галп, все никак не посмотрю, теперь обновлю вкладки. Но на днях надо заставить себя разобраться

[@Levi-Ezio]

Большое спасибо Жду следующего выпуска !

[@ИринаТоболич-х6н]

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

[@vadymprokopchuk]

уже есть на канале

[@fobianka2131]

не сочтите за наглость, хотелось бы видео или марафона по вёрстке для тех, кто только установил gulp, просмотрел видео про scss. Как вы со всем этим работаете, чтобы более уверенно себя чувствовать. Так сказать видео для середнячков. Спасибо за ваш труд и доброту!

[@spilo777]

Дай Бог тебе бесконечных вечеринок и запаса кофе! Браво маэстро!

[@2Extremum]

В заголовке "современный синтаксис" в видео require. Попробуйте последний gulp-autoprefixer поставить с require, который только через import подключается, а тип - модуль в package не объявишь и babel не поставишь, потому что другие подключения на require. И не только gulp-autoprefixer на import переходят, потому "современный" уже он, а не require

[@0percot926]

А с чем связан этот переход?

[@2Extremum]

@@0percot926 "Стильно, модно, молодежно" (с)...

[@MarkSizm-de5on]

Могу помочь с переводом этой сборки на es6 модули, мне очень помогло

[@Наталья-р4д3ь]

Can you share how to transform code to modul ES6?

[@9cross9plays38]

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

[@dkvisual9839]

Спасибо за проделанную работу)

[@j-lewis]

Хотел сделать отметку по поводу, когда у нас много JS-файлов, рассказывается на этой минуте (1:26:50), так вот, Вадим забыл сказать, что чтобы у нас небыло бесконечного обновления main.min.js, нам нужно также '!app/js/main.min.js' и в function watching () { ... } дописать, вот так: function watching() { watch(['app/**/*.html']).on('change', browserSync.reload); watch(['app/scss/**/*.scss'], styles); watch(['app/js/*.js', '!app/js/main.min.js'], scripts); }

[@wordpress2222]

Благодарю Вас Вадим, за Ваши уроки, за Ваши знания и за то что делаете людей умней и богаче респект Бро! 🙏🤝💥 Всех благ, Вам и Вашей семье! 🙏 Ас-саляму алейкум!!! 🤝

[@user-frond-end_dev]

огромное спасибо! до этого видео я боялся Gulp? а теперь он мне понравился. Вадимчик, дружище, можно сделать так, чтобы эта сборка была под обычные задачи, верстки простых сайтов, с попапами, акордионами, и всякими приблудами, а потом чтобы продолжить эту сборку масштабировать под задачи интернет магазина?- спасибо за крутую вечеринку. Надеюсь ты прочитаешь этот комментарий, думаю ты поймешь, что я имел ввиду

[@lesan6866]

Отличное видео, жду продолжения, хочется сделать себе норм сборку в 2023году) Огромная благодарность за видео! Успехов!

[@vadymprokopchuk]

спасибо, сделаем

[@gfromsx]

слезы на глазах... отличное видео

[@ИринаСвятецкая-х6е]

Спасибо за урок! Перехожу с версии 3.9 на 4 - синтаксис очень сильно изменился. Благодарю, все получилось.

[@sergeypetrovetsky3431]

О, Вадим, у тебя уже 70 тысяч тусовщиков на канале) Приятно удивлен! Последний раз смотрел тебя на 10к ((

[@ЮляСолнце-ь2у]

Вадим! Спасибо за информативные, умные и человеческие объяснения❤

[@RustikMalakh]

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

[@christianspace9700]

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

[@runup1569]

Спасибо большое за сборку! И формат видео понравился, в общем ждём продолжения!!!

[@neumannsauer]

Всем тем у кого ошибка на autoprefixer при запуске gulp. Вместо стандартного require() используем динамический импорт внутри функции styles. async function styles() { const autoprefixer = (await import('gulp-autoprefixer')).default; return src('app/scss/style.scss') .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'] })) .pipe(concat('style.min.css')) .pipe(scss({ outputStyle: 'compressed' })) .pipe(dest('app/css')) .pipe(browserSync.stream()); }

[@Penguinchik2024]

спасибо!

[@soloviyshpak]

Чел, ты просто гений :)

[@lanele6599]

Спасибо!

[@seregaigraet]

спасибо, ты спас моё время)

[@sad_gary]

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

[@Помойка-э9з]

Спасибо тебе огромное, так всё чётко объясняешь. И юмор у тебя что надо :) Приятно слушать, хорошо речь поставлена. Удачи в развитии канала!

[@АннаРозборська]

Дуже зрозумілими словами і максимально оптимальним темпом про такі важливі речі. Лайк ОДНОЗНАЧНО!!!

[@aaaGjool]

Огромное спасибо. Очень жду развития сборки!

[@Денис-ф2е4ь]

Рад что ты вернулся. Даешь вечеринку))

[@СашаАлександр-е4м]

6:45 лучший прилок,который я слышал за прошедший год,я даже заплакал от смеха

[@CTpeJloK_]

Спасибо. Как всегда всё понятно и интересно.

[@СергейТрубников-ж6ч]

Вечеринка что надо! Спасибо тебе!

[@vadymprokopchuk]

спасибо

[@vyazatlegko]

спасибо огромное за такие прекрасные видео на вашем канале!

[@powerjavascriptman]

Большое спасибо за труд и отличное объяснение. Это было моё первое знакомство с gulp

[@augustina1981]

Какое вам большое спасибо! Я пять сборок за неделю сделала и все ломались(( Ваша - идеальная! И работает еще!

[@elena007fly]

И gulp-autoprefixer работает?

[@augustina1981]

@@elena007fly да, что удивительно. В других сборках ломался😬

[@elena007fly]

@@augustina1981 А вы наверное готовую брали с патреона. Уже в конце поняла: в этой сборке версия 8, а у меня установилась 9я

[@augustina1981]

@@elena007fly нет, собирала по видео, у меня встала 8-я версия. Но если у вас 9-я, то да, можно попробовать понизить.

[@elena007fly]

@@augustina1981 так и сделала)

[@demidronder]

Просто нереальный контент. Спасибо огромное Делай все, что есть по галпу.

[@iwmatt]

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

[@cyberactiv1]

Супер !!! З нуля - саме те, що треба!

[@Freedom_Code]

Не смог найти развитие сборки на канале. А так супер ! Контентище !!!

[@vadymprokopchuk]

она, есть, посмотри во всех видосах, сейчас прикреплю в описание

[@Freedom_Code]

@@vadymprokopchuk спасибо огромное !!! 4 года отверстал без сборщика, но устал от постоянного обмазывания IDE

[@vadymprokopchuk]

@@Freedom_Code понял, пользуйся и кайфуй)

[@KosMicBor]

Спасибо большое за такое подробное видео! Очень интересно и познавательно!

[@dre._]

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

[@vadymprokopchuk]

огонь!

[@candy_front]

Вадим, спасибо огромное за класнный и очень полезный видос!

[@GCranK0]

Просто и понятно! спасибо! Жду следующее видео на эту тему!

[@konstantinv5512]

Привет, Вадим. На тебя надежда) Установил переустановил, requide - commonJS. Старые проекты не заводятся, все - пришел тебя смотреть)

[@alext5030]

Естественно, require - это для CommonJS модулей. Но фишка в том, что для большинства таких модулей ES6 import тоже работает. Вот наоборот - нет. Т.е. модули, которые ES6, можно ипортировать только import-ом. Понимание различные систем модулей в JS - это маст хэв. Практической (!!!) пользы от этого на пару порядков больше, чем от всякой бредятины (место которой в каких-нибудь справочниках) типа структур данных и алгоритмов сортировок.

[@rus24133]

Я хотел научиться gulp и ты выпустил такое круто руководство

[@MsSharish]

Очень круто, спасибо большое!

[@Диман-е9ш]

Спасибо, дальше ждем вечеринку по webpack )

[@RomanKhassazhirov]

Низкий поклон, рад видеть тебя в добром здравии! Когда ожидать дальнейших видео? Очень полезно, не затягивай пожалуйста!)

[@sergeytikhonov6544]

аххаха, уже второй раз такая ситуация: учу что-то, и у Вадима выходит новое видео по этой теме! первый раз такое было с html семантикой. Вадим, спасибо!

[@vadymprokopchuk]

я просто умею читать мысли)