Тёмный

Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких 

WebDesign Master
Подписаться 303 тыс.
Просмотров 69 тыс.
50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Всем привет, друзья! Это обновленное и переработанное руководство Gulp 4, в котором мы детально разберем работу с Gulp, ознакомимся с новыми методами построения задач (тасков), вы узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. По традиции, мы будем знакомиться с возможностями инструмента на реальном примере и создадим удобное рабочее окружение для HTML верстки.
Страница урока: webdesign-master.ru/blog/tool...
Таймкоды:
00:00 Начало урока
00:24 Что такое Gulp
00:56 Установка и настройка
01:39 Создание нового проекта
07:23 Подключение Gulp
10:23 Подключение Browsersync
10:56 Работа с Browsersync
14:05 Экспорт функции в таск
18:32 Работа со скриптами проекта
31:48 Вотчинг файлов
36:25 Дефолтный таск
41:55 Работа со стилями проекта
55:30 Несколько CSS препроцессоров
1:04:49 Вотчинг HTML файлов
1:09:19 Работа с изображениями
1:26:33 Сборка проекта (build)
1:34:37 Важные выводы
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

 

4 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 185   
@wdm
@wdm Месяц назад
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@s9219871110
@s9219871110 3 года назад
Я в разных местах кормился (учился), но тут, дружище, ты удивительно объясняешь. Ты объясняешь назначение каждой строчки кода, и получается не бездумная писанина, а вникание в каждый символ. Минин отдыхает в этом плане. Великолепно! Я аплодирую стоя, ну и этот комментарий ради "комментария" =) Походу все твои уроки я оплачу в ближайшее время))))
@Metal1599Pro
@Metal1599Pro 4 года назад
Как же я тебя ждал :)
@boneshock7549
@boneshock7549 3 года назад
Алексей большое вам спасибо, за ваш труд!!!
@mr-_-robot5873
@mr-_-robot5873 3 года назад
Лучшая подача материала,что я видел, спасибо!
@almaz.kamaliev
@almaz.kamaliev 4 года назад
Спасибо за уроки и за труд!
@user-cy2td3lg8t
@user-cy2td3lg8t 3 года назад
Спасибо за такое подробное объяснение; наконец-то я начал понимать, как работает Gulp
@user-yb8zd6gj2f
@user-yb8zd6gj2f 2 года назад
Лучшее устное и наглядное объяснение, спасибо . Наконец всё понял.
@user-wd4wl1nk8x
@user-wd4wl1nk8x 4 года назад
Благодарю за видео, Алексей. Как всегда на высоте)
@ivanshynkarenko8989
@ivanshynkarenko8989 4 года назад
Круто, очень хочется побольше новых видео, особенно по "джедаям"
@alexandercelevra2393
@alexandercelevra2393 4 года назад
Лёш, спасибо тебе! Я помню самую свою первую сборку для тестового задания по старой версии этого видео, когда оно только вышло. Сидел в ночную смену на заводе и писал в Notepad++ на полудохлом ПК в перерывах между сменой деталей на станке
@kotofun
@kotofun 2 года назад
Спасибо за полезное видео! Объяснено доступным языком и достаточно быстро. Автору респект!
@yahyo5452
@yahyo5452 4 года назад
Урааааа - я закончил урок и всё было понятно, большое спасибо Масере :) - Будь здоров всегда
@user-us2cr9vw8l
@user-us2cr9vw8l 4 года назад
Спасибо, большое! Все изложено очень просто и подробно
@user-ke5di3qr3o
@user-ke5di3qr3o 3 года назад
Спасибо за урок! Замечательное изложение темы, в результате готовый gulpfile для сборки проектов! Респект!
@user-wz9vl9li7q
@user-wz9vl9li7q 3 года назад
Спасибо тебе, дружище, за твои труды!!!
@rem2764
@rem2764 4 года назад
спасибо за проделанную работу, джедай
@sauronin2058
@sauronin2058 2 года назад
Очень благодарен за это руководство и подробное разъяснение, как все устроено. Но особенно спасибо за перевод статей. Вы очень сильно помогли изучить gulp)
@gexplozer
@gexplozer 3 года назад
Разобрался с переходом от третьей версии. Спасибо большое!
@mafiaekd
@mafiaekd 4 года назад
Спасибо огромное)
@mr_boogie
@mr_boogie 3 года назад
Вот за что мне нравится youtube) Спасибо за открытый, разжеванный, актуальный урок по gulp'у. Лайк и подписка однозначно)
@user-in9qp9em7i
@user-in9qp9em7i Год назад
Достойно уважения! Перевёл документацию, залил на свой сайт и снял понятное видео. Отлично!
@user-cu4gm2km8s
@user-cu4gm2km8s 3 года назад
Огромная благодарность, наконец-то разобрался как это работает, и что за что отвечает. Теперь необходимо прочитать документацию чтобы закрепить теорию
@user-kv8wh2hi8t
@user-kv8wh2hi8t 3 года назад
Спасибо огромное за Ваш труд!!! Всё интересно и доходчиво, без воды, максимум пользы!)) Обязательно Всем рекомендую к просмотру!))
@alfa_main
@alfa_main 3 года назад
Отдельное спасибо автору за адрес через который можно просматривать с любого другого устройства проект) Спасибо вам за вашу работу, очень хорошее дело делаете)
@christinalozovaya5860
@christinalozovaya5860 4 года назад
Супер, спасибо! Как всегда очень доходчиво и информативно. Лучики добра вам
@user-wx6lb8oz1h
@user-wx6lb8oz1h Год назад
Просто огромное спасибо! Самый маленький всё понял!) Очень хорошо все изложено, я просто в восторге!)
@user-xv1fv4mp8j
@user-xv1fv4mp8j 3 года назад
Да, действительно исчерпывающее руководство!!
@vladislavche7603
@vladislavche7603 3 года назад
Спасибо огромное, воспользовался уроком, очень пригодилось
@GaldarTurin
@GaldarTurin 3 года назад
Благодарю за такие видео !
@user-fy7ot8eh5h
@user-fy7ot8eh5h Год назад
Спасибо, очень полезный урок!
@Vladimir-ww1be
@Vladimir-ww1be 3 года назад
Обалденный конетнт спасибо большое за урок!!!
@maxengio
@maxengio 3 года назад
Как всегда все круто, структурированно и по делу
@_SilentGames
@_SilentGames 3 года назад
Ты заслужил место в раю!!!! Очень полезный урок!!! Спасибо большое за твой труд!!! "Gulp для самых маленьких"
@user-qz1rs2zd7i
@user-qz1rs2zd7i 3 года назад
"Дорогие друзья" этот парень хорош!!! Очень полезный урок Это мой первый опыт работы Gulp и первый урок. После просмотра чувствую как будто всю жизнь работал с Gulp))
@vitaliihura9808
@vitaliihura9808 4 года назад
Отличный урок! Спасибо!)
@GlebKrylov
@GlebKrylov 2 года назад
Спасибо что разжевал все очень подробно, очень полезно для новичков вроде меня.
@user-mg7tt3fb8m
@user-mg7tt3fb8m 3 года назад
Спасибо за видео! Очень полезно!
@yilinvlogs9102
@yilinvlogs9102 Год назад
Спасибо, очень полезный урок
@user-cd1cv4lm7s
@user-cd1cv4lm7s 3 года назад
Спасибо тебе святой ты человек!!!!
@ArthurGermanovich
@ArthurGermanovich 4 года назад
это случилось, ура новый видос!
@kostukov75
@kostukov75 4 года назад
Большое спасибо за полезный контент
@mini8622
@mini8622 4 года назад
Спасибо большое за подробное объяснение!! И за легкий смех над грустным котом))
@Rusu421
@Rusu421 2 года назад
Люблю галп. Где еще найдется модуль, для исправления работы других модулей
@user-vg3em9fs5u
@user-vg3em9fs5u 3 года назад
Спасибо, как раз собирался обновлять свой галп и тут такая помощь, особое спасибо за доки, я хоть английский и знаю, но на русском все таки проще читается. К себе в сборщик я еще ко всему этому добру babel добавил) Жду новых джедаев верстки!
@vladislavsite
@vladislavsite 3 года назад
Крутой гайд по gulp - узнал много нового про 4 версию и gulp в целом!
@romatokar3516
@romatokar3516 4 года назад
Только недавно видел ваш перевод и перечитав его полностью переделал сборку, а тут ещё видос
@user-nk1te7dl2r
@user-nk1te7dl2r 3 года назад
Спасибо!!! Понятно и полезно!
@eka1929
@eka1929 3 года назад
Спасибо за труд ! ☆
@stasonsv52
@stasonsv52 3 года назад
Крутое объяснение!
@webprogrru3225
@webprogrru3225 3 года назад
Отличный курс
@user-ol8jr5mx2t
@user-ol8jr5mx2t 3 года назад
Спасибо большое за видео, очень помогло!!!!)))
@mrs.doubtfire8197
@mrs.doubtfire8197 3 года назад
Спасибо тебе, милчеловек!
@erik_james
@erik_james 3 года назад
Чувваак, спасибо!! Сейчас 2 часа ночи, мне до 8-ми утра надо сдать тестовое задание на позицию верстальщика))) Только по твоему уроку получается на ходу понимать и применять Гульпик)
@user-rd4ys3bm3q
@user-rd4ys3bm3q 3 года назад
Спасибо большое за проделанную работу, с меня лайкос и коммент, а подписка уже давно!))
@thesijisgame6590
@thesijisgame6590 4 года назад
Спасибо большое
@evgeniys.4325
@evgeniys.4325 3 года назад
Спасибо, очень полезно)
@user-qh9yz2ro7r
@user-qh9yz2ro7r 4 года назад
спасибо!!!!!!!!! лайк - всегда) ждем джедая
@zhukovpro
@zhukovpro 4 года назад
Алексею сначала лайк и коммент, потом уже только смотреть видео))
@user-fx3mk3ph1n
@user-fx3mk3ph1n Год назад
СПАСИБО!!!!
@user-xu7rj3vs4w
@user-xu7rj3vs4w 3 года назад
Спасибо! Мне походу одному думается что вот раньше был галп так галп! ))) Как буд-то вчера в машине руль был на месте, а сегодня джойстик с кнопочками, притом что кнопочки подписаны по своему.
@alexvolkov6269
@alexvolkov6269 4 года назад
15 минут назад. Сейчас тоже начал Gulp учить. Очень быстро стал верстать + SASS + PUG + Bootstrap
@user-iv3wx1rb6z
@user-iv3wx1rb6z 3 года назад
Спасибо)
@user-or4co6bx9o
@user-or4co6bx9o 4 года назад
Спасибо за объяснение и перевод. Думаю разделение видео по тайм-кодам к определенному модулю или теме будет очень удобно для зрителей канала. И еще может разделение длинного объяснение и установкой модуля также по тайм-коду, чтобы можно было несколько раз посмотреть само объяснение
@Ilya-gv6kb
@Ilya-gv6kb 3 года назад
Спасибо ! Очень полезно / понятно / позитивно )) Есть ещё хорошая штука в gulp - конвертер шрифтов , и их авто подключение , если об этом расскажите очень думаю будет полезно , спасибо ! )
@MILAYA_02
@MILAYA_02 4 года назад
Спасибо))
@wdm
@wdm 3 года назад
Внимание! В настоящее время рекомендую использовать модуль "compress-images" вместо "gulp-imagemin". Также в настоящее время для стабильной работы рекомендую устанавливать pngquant-bin версии 6.0.0 и gifsicle версии 5.3.0. Команда для установки: npm i --save-dev compress-images gifsicle@5.3.0 pngquant-bin@6.0.0 del Все актуальные изменения отражены на странице урока по Gulp: webdesign-master.ru/blog/tools/gulp-4-lesson.html Руководство по установке и настройке окружения WSL, Node.js и Gulp: webdesign-master.ru/blog/tools/wsl-nodejs-new.html
@volodymyrshtoda3498
@volodymyrshtoda3498 3 года назад
cпасибо, очень качественно
@pussydussy3693
@pussydussy3693 2 года назад
Спасибо
@evgen_frontend_rostov
@evgen_frontend_rostov 2 года назад
СПАААААСИИИИИИБОООООО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Я ДВА ДНЯ ЭТУ ИНФУ ИСКАЛ))))))))
@Life-joy
@Life-joy Год назад
Спасибо! почти установил ... еще 18 минут видео
@aleksandervitalevich1299
@aleksandervitalevich1299 6 месяцев назад
Здорово! И autoprefixer тоже уважать себя заставил... 😞
@vasyasolovyov6702
@vasyasolovyov6702 4 года назад
Ждём вёрстку 💪🏼
@NeoJohnSmit
@NeoJohnSmit 3 года назад
thank you brother ))
@Blue-oy7tz
@Blue-oy7tz 4 года назад
Наконец то)
@dotg6618
@dotg6618 2 года назад
! Спасибо
@azimutaz2810
@azimutaz2810 4 года назад
Здраствуйте. Спасибо за вашу работу. Подскажите, а сушествует npm плагин который будет конкотенировать не весь файл например jquery, а только те функции которые используются в проекте?
@sorbonshukurov1115
@sorbonshukurov1115 3 года назад
Супер классс
@alexandrameas4436
@alexandrameas4436 3 года назад
Спасибо! Супер видео. Есть вопросик: а почему для const concat = require('gulp-concat') надо убирать create?
@user-bh6pz2iw6w
@user-bh6pz2iw6w 4 года назад
Я тебя ждал, выпускай по чаще видео, ты меня научил как с Опенкартор работать. Жду теперь Октабрь. P.S. Вордпрес надоел с его костылями
@nekitsan3837
@nekitsan3837 3 года назад
Чуваки, у кого не работает просмотр(browsersync) с другого устройства, скорее всего данный ip занят кем-то, у меня был занят виртуальной машиной. Увидел через ipconfig
@user-bg1be1wn9z
@user-bg1be1wn9z 3 года назад
Нормуль, спс! автор, подскажи плз, что у тебя за тема в vs-code?
@wdm
@wdm 3 года назад
One Dark Material Theme. Sublime Text.
@amg1566
@amg1566 4 года назад
👍👍👍👍👍
@user-ig4lq2ts8b
@user-ig4lq2ts8b 3 года назад
про грустного кота сам пошутил сам посмеялся) но я честно говоря посмеялся тоже)
@user-hd3jd4oy7j
@user-hd3jd4oy7j 3 месяца назад
Добрый день , очень классный урок спасибо вам огромное за труд , единственное что у меня возник вопрос если к разным файлам html нужно подключить свой скрипт как это сделать ведь все собирается в один файл , нужно прописывать каждый таск отдельно ?
@wdm
@wdm 3 месяца назад
Здравствуйте. Нет, все HTML файлы обрабатываются пачкой. Отдельные таски прописывать не нужно.
@user-pt4cc1mj4c
@user-pt4cc1mj4c 3 года назад
Добрый день, подскажите пожалуйста, как я могу подключить и конкатенировать стронние css файлы, например normalize.css или bootstrup?
@user-gq5ic7eo9z
@user-gq5ic7eo9z 2 года назад
Спасибо тебе, Мастер! 2 месяца, имея жуткий дефицит времени, я пытался хоть что-то сделать с Галпом, не зная при этом JS! И только разобрав данный урок на "атомы" начал что-то понимать (а смотрел много у кого)! Есть такой вопрос: а почему рекомендуется заменить gulp-imagemin на compress-images? Загуглил, вроде очень многие imagemin пользуются...
@wdm
@wdm 2 года назад
Здравствуйте. Используйте imagemin. Реализация подключения есть в стартере: github.com/agragregra/OptimizedHTML-5
@user-yk2fd3cj8i
@user-yk2fd3cj8i 2 года назад
Добрый день, Алексей! Спасибо за полезные материалы. У меня возник маленький вопрос: Я увидел одну разницу в содержании урока видео и текстового содержания урока на Вашем сайте: В качестве минимизации изображений есть два разных модуля. Поэтому вопрос: можно ли использовать для модуля compress-images, который Вы предлагаете на сайте (текстовой вариант урока) применять как в дополнения для того, чтобы не минифицировались много раз одни и те же картинки, использовать модуль gulp-newer, так как Вы предлагаете это сделать на Видео для другого модуля imagemin, который отстутствует в уроке текстовом на Вашем сайте ?
@wdm
@wdm 2 года назад
Здравствуйте. Можете использовать любой из предлагаемых модулей. Но в случае с использованием gulp-imagemin, как в уроке, вам необходимо использовать пакеты модульно, как это сделано в OptimizedHTML 5: github.com/agragregra/oh5
@pavelp2501
@pavelp2501 4 года назад
Добрый день! Спасибо за все курсы, в том числе и платные. Хочу Вас попросить дополнить конечный код и текстовое описание установкой плагина ftp-vinil и диплоем на хостинг. Спасибо!
@wdm
@wdm Год назад
Здравствуйте. В настоящее время рекомендую использовать Rsync: github.com/agragregra/OptimizedHTML-5/blob/master/gulpfile.js#L123
@user-ed5et8ud4k
@user-ed5et8ud4k 3 года назад
Урок классный! Подскажи, как работать с php файлами?
@wdm
@wdm 3 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wE-Oi84UJXE.html
@asifabbasov3801
@asifabbasov3801 Год назад
Автор у меня вопрос. Я могу вместо папки "app" создать папку "src"?
@mew6085
@mew6085 3 года назад
я просто абалдел, в конце такой чееееее, как это собралось как это мать твою работает xD
@MegaTesei
@MegaTesei 3 года назад
Спасибо. Хороший разбор. Мне понравилось. Есть вопрос: Почему логика выгрузки готового результата имеет промежуточный итог? К примеру, обработанные картинки выгружаются вначале в папку исходника, а затем копируются в финальную папку (dist). То же самое с минифицированными файлами. Почему не сделать напрямую выгрузку в финальную папку dist, без функции копирования?
@wdm
@wdm 3 года назад
Потому, что функция сборки не нужна при посадке вёрстки на CMS. Это просто опция.
@advokats086
@advokats086 3 года назад
МАЭСТРО СПАСИБО ЗА НАУКУ... !!! ПОДСКАЖИ КАК НАСТРОИТЬ GULP НА ОПРЕДЕЛЕННЫЙ БРАУЗЕР ЕСЛИ ПОСЛЕДНИХ НЕСКОЛЬКО В ОС...
@wdm
@wdm 3 года назад
Нужный браузер сделать браузером по-умолчанию в системе.
@user-jv4px9cu3e
@user-jv4px9cu3e 3 года назад
подскажите,как полностью удалить Gulp из системы?т.е глобально очистить его вообще
@trashaccount5492
@trashaccount5492 4 года назад
Спасибо за урок на 4 гульпе. Почему мы теперь не используем bower?
@wdm
@wdm Год назад
В основном используем npm, но иногда и bower не грех)
@is1ander82
@is1ander82 3 года назад
Почему используются константы, а не переменные через var или let? Видел похожую сборку, только там переменные были. Есть какая-то разница?
@alekseypakriev4584
@alekseypakriev4584 3 года назад
Учи js и все вопросы отпадут. Var уже давно никто не использует. let и const практически одно и тоже, за исключением того, что const нельзя переопределить.
@user-bi4ro6id4k
@user-bi4ro6id4k 2 года назад
Все сделал полностью из вашего урока, почему-то не собирается gulp build - где можно посмотреть собранную сборку вашу из видео?) понял что ошибка с изображениями там начинает все крашиться) поменял compress-image на image-min, из урока сделал 1 фиг ошибка
@user-gq5ic7eo9z
@user-gq5ic7eo9z 2 года назад
Попробуй взять не последнюю, восьмую, версию image-min, а предыдущую, 7.1, у меня с ней все заработало.
@wdm
@wdm Год назад
github.com/agragregra/OptimizedHTML-5 Вот с последним Imagemin. Модульный Gulpfile и package.json
@user-zn7uy9cy6h
@user-zn7uy9cy6h 3 года назад
Привет всем! Не подскажет кто, на WSL Gulp не срабатывают функции с SASS и browserSync (При запуске конвертирует, а в последствии не работает)? На реальной Ubuntu и с помощью консоли Git Bash работает. Хотелось бы работать именно в WSL, т.к. в VS Code терминал Git Bash не сохраняет команды.
@wdm
@wdm Год назад
Я использую сейчас Git Bash. Для того, чтобы сохранялись команды, следует: nano ~/.bash_profile PROMPT_COMMAND='history -a' Подробнее: webdesign-master.ru/blog/docs/webdev-without-wsl.html
@user-fn9fd6wv8u
@user-fn9fd6wv8u 2 года назад
Добрый день. Помогите, пожалуйста. Не могу установить gulp-sass, выдает ошибку. Уже все форумы обшарила, но ответа на вопрос не нашла. Что ни делаю - ничего не работает
@xkdkdkfg9272
@xkdkdkfg9272 2 года назад
Можете подсказать? Подключаю по аналогии из видео вместо модуля "gulp-imagemin" модуль "compress-images". Запускаю таск и получаю ошибку TypeError: Cannot read properties of undefined (reading 'jpg'). В официальной документации compress-images прописанные функции мне не понятны :((
@wdm
@wdm Год назад
github.com/agragregra/OptimizedHTML-5 Вот с последним Imagemin. Модульный Gulpfile и package.json
@user-iu9ws5de7t
@user-iu9ws5de7t 4 года назад
Лайк репост лайк лайк лайк репост
@user-tx2ym7iq5u
@user-tx2ym7iq5u 2 года назад
Здравствуйте! Обновился плагин gulp-imagemin 8.0.0 требующий импорт в gulp4; подключение const imagemin = require('gulp-imagemin'); выдает ошибку. Сможете найти решение? погуглив, я решения не нашел
@wdm
@wdm Год назад
Здравствуйте. Проблема решена. Посмотрите, как это реализовано в OH5: github.com/agragregra/OptimizedHTML-5 В package.json внимание на "type": "module", и обратите внимание на реализацию импорта модулей в gulpfile.js
@user-mo5us7te2j
@user-mo5us7te2j 3 года назад
Добрый день! При попытке запустить gulp images выдает следующие ошибки - gulp-imagemin: Couldn't load default plugin "gifsicle", gulp-imagemin: Couldn't load default plugin "optipng", spawn C:\Users\User\Desktop\theCodeLibrary\gulp 4 ode_modules\mozjpeg\vendor\cjpeg.exe ENOENT. Не подскажете в чем проблема? По коду все также как у вас! Буду очень благодарен за ответ!)))
@wdm
@wdm Год назад
github.com/agragregra/OptimizedHTML-5 Вот с последним Imagemin. Модульный Gulpfile и package.json
@user-xj9pe8yt8g
@user-xj9pe8yt8g 3 года назад
лайк за грустного кота
Далее
I Built 4 SECRET Rooms In ONE COLOR!
29:04
Просмотров 18 млн
Заметили?
00:11
Просмотров 3 млн
📸🍆
0:54
Просмотров 7 млн