Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
Vložit
- čas přidán 7. 06. 2024
- Все курсы в одном комплекте: 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
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Как же я тебя ждал :)
Круто, очень хочется побольше новых видео, особенно по "джедаям"
Спасибо за такое подробное объяснение; наконец-то я начал понимать, как работает Gulp
Лёш, спасибо тебе! Я помню самую свою первую сборку для тестового задания по старой версии этого видео, когда оно только вышло. Сидел в ночную смену на заводе и писал в Notepad++ на полудохлом ПК в перерывах между сменой деталей на станке
Урааааа - я закончил урок и всё было понятно, большое спасибо Масере :) - Будь здоров всегда
Я в разных местах кормился (учился), но тут, дружище, ты удивительно объясняешь. Ты объясняешь назначение каждой строчки кода, и получается не бездумная писанина, а вникание в каждый символ. Минин отдыхает в этом плане. Великолепно! Я аплодирую стоя, ну и этот комментарий ради "комментария" =) Походу все твои уроки я оплачу в ближайшее время))))
Алексей большое вам спасибо, за ваш труд!!!
Лучшая подача материала,что я видел, спасибо!
Благодарю за видео, Алексей. Как всегда на высоте)
Очень благодарен за это руководство и подробное разъяснение, как все устроено.
Но особенно спасибо за перевод статей.
Вы очень сильно помогли изучить gulp)
Спасибо за полезное видео! Объяснено доступным языком и достаточно быстро. Автору респект!
Вот за что мне нравится youtube) Спасибо за открытый, разжеванный, актуальный урок по gulp'у. Лайк и подписка однозначно)
Спасибо за уроки и за труд!
Лучшее устное и наглядное объяснение, спасибо . Наконец всё понял.
Просто огромное спасибо! Самый маленький всё понял!) Очень хорошо все изложено, я просто в восторге!)
Спасибо огромное за Ваш труд!!! Всё интересно и доходчиво, без воды, максимум пользы!)) Обязательно Всем рекомендую к просмотру!))
Отдельное спасибо автору за адрес через который можно просматривать с любого другого устройства проект) Спасибо вам за вашу работу, очень хорошее дело делаете)
Спасибо за урок! Замечательное изложение темы, в результате готовый gulpfile для сборки проектов! Респект!
Огромная благодарность, наконец-то разобрался как это работает, и что за что отвечает.
Теперь необходимо прочитать документацию чтобы закрепить теорию
спасибо за проделанную работу, джедай
"Дорогие друзья" этот парень хорош!!! Очень полезный урок
Это мой первый опыт работы Gulp и первый урок.
После просмотра чувствую как будто всю жизнь работал с Gulp))
Достойно уважения! Перевёл документацию, залил на свой сайт и снял понятное видео. Отлично!
Супер, спасибо! Как всегда очень доходчиво и информативно. Лучики добра вам
Разобрался с переходом от третьей версии. Спасибо большое!
Спасибо, большое! Все изложено очень просто и подробно
Спасибо большое за подробное объяснение!! И за легкий смех над грустным котом))
Спасибо тебе, дружище, за твои труды!!!
Ты заслужил место в раю!!!! Очень полезный урок!!! Спасибо большое за твой труд!!! "Gulp для самых маленьких"
Спасибо огромное)
Спасибо огромное, воспользовался уроком, очень пригодилось
Спасибо, очень полезный урок!
Отличный урок! Спасибо!)
Как всегда все круто, структурированно и по делу
Благодарю за такие видео !
Обалденный конетнт спасибо большое за урок!!!
Спасибо, как раз собирался обновлять свой галп и тут такая помощь, особое спасибо за доки, я хоть английский и знаю, но на русском все таки проще читается. К себе в сборщик я еще ко всему этому добру babel добавил)
Жду новых джедаев верстки!
Спасибо, очень полезный урок
Спасибо за видео! Очень полезно!
Отличный курс
Крутое объяснение!
Спасибо что разжевал все очень подробно, очень полезно для новичков вроде меня.
Большое спасибо за полезный контент
это случилось, ура новый видос!
Крутой гайд по gulp - узнал много нового про 4 версию и gulp в целом!
Да, действительно исчерпывающее руководство!!
Чувваак, спасибо!! Сейчас 2 часа ночи, мне до 8-ми утра надо сдать тестовое задание на позицию верстальщика)))
Только по твоему уроку получается на ходу понимать и применять Гульпик)
Спасибо большое за видео, очень помогло!!!!)))
Спасибо за труд ! ☆
Только недавно видел ваш перевод и перечитав его полностью переделал сборку, а тут ещё видос
Спасибо!!!
Понятно и полезно!
Спасибо большое за проделанную работу, с меня лайкос и коммент, а подписка уже давно!))
Алексею сначала лайк и коммент, потом уже только смотреть видео))
спасибо!!!!!!!!! лайк - всегда) ждем джедая
Спасибо тебе святой ты человек!!!!
Спасибо тебе, милчеловек!
Люблю галп. Где еще найдется модуль, для исправления работы других модулей
Спасибо, очень полезно)
Ждём вёрстку 💪🏼
СПАСИБО!!!!
Спасибо большое
Спасибо !
Очень полезно / понятно / позитивно ))
Есть ещё хорошая штука в gulp - конвертер шрифтов , и их авто подключение , если об этом расскажите очень думаю будет полезно , спасибо ! )
Спасибо за объяснение и перевод. Думаю разделение видео по тайм-кодам к определенному модулю или теме будет очень удобно для зрителей канала. И еще может разделение длинного объяснение и установкой модуля также по тайм-коду, чтобы можно было несколько раз посмотреть само объяснение
Спасибо! Мне походу одному думается что вот раньше был галп так галп! ))) Как буд-то вчера в машине руль был на месте, а сегодня джойстик с кнопочками, притом что кнопочки подписаны по своему.
Спасибо)
Я тебя ждал, выпускай по чаще видео, ты меня научил как с Опенкартор работать. Жду теперь Октабрь. P.S. Вордпрес надоел с его костылями
thank you brother ))
Спасибо))
Супер классс
Здраствуйте. Спасибо за вашу работу. Подскажите, а сушествует npm плагин который будет конкотенировать не весь файл например jquery, а только те функции которые используются в проекте?
Нормуль, спс!
автор, подскажи плз, что у тебя за тема в vs-code?
One Dark Material Theme. Sublime Text.
Спасибо! Супер видео. Есть вопросик: а почему для const concat = require('gulp-concat') надо убирать create?
Внимание! В настоящее время рекомендую использовать модуль "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
cпасибо, очень качественно
Спасибо
СПАААААСИИИИИИБОООООО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Я ДВА ДНЯ ЭТУ ИНФУ ИСКАЛ))))))))
Спасибо! почти установил ... еще 18 минут видео
Здорово! И autoprefixer тоже уважать себя заставил... 😞
15 минут назад. Сейчас тоже начал Gulp учить. Очень быстро стал верстать + SASS + PUG + Bootstrap
! Спасибо
Наконец то)
Добрый день! Спасибо за все курсы, в том числе и платные.
Хочу Вас попросить дополнить конечный код и текстовое описание установкой плагина ftp-vinil и диплоем на хостинг. Спасибо!
Здравствуйте. В настоящее время рекомендую использовать Rsync: github.com/agragregra/OptimizedHTML-5/blob/master/gulpfile.js#L123
Спасибо тебе, Мастер! 2 месяца, имея жуткий дефицит времени, я пытался хоть что-то сделать с Галпом, не зная при этом JS! И только разобрав данный урок на "атомы" начал что-то понимать (а смотрел много у кого)!
Есть такой вопрос: а почему рекомендуется заменить gulp-imagemin на compress-images? Загуглил, вроде очень многие imagemin пользуются...
Здравствуйте. Используйте imagemin.
Реализация подключения есть в стартере: github.com/agragregra/OptimizedHTML-5
Урок классный! Подскажи, как работать с php файлами?
czcams.com/video/wE-Oi84UJXE/video.html
👍👍👍👍👍
Добрый день, подскажите пожалуйста, как я могу подключить и конкатенировать стронние css файлы, например normalize.css или bootstrup?
Добрый день , очень классный урок спасибо вам огромное за труд , единственное что у меня возник вопрос если к разным файлам html нужно подключить свой скрипт как это сделать ведь все собирается в один файл , нужно прописывать каждый таск отдельно ?
Здравствуйте. Нет, все HTML файлы обрабатываются пачкой. Отдельные таски прописывать не нужно.
Автор у меня вопрос.
Я могу вместо папки "app" создать папку "src"?
Чуваки, у кого не работает просмотр(browsersync) с другого устройства, скорее всего данный ip занят кем-то, у меня был занят виртуальной машиной. Увидел через ipconfig
Добрый день, Алексей! Спасибо за полезные материалы. У меня возник маленький вопрос:
Я увидел одну разницу в содержании урока видео и текстового содержания урока на Вашем сайте:
В качестве минимизации изображений есть два разных модуля.
Поэтому вопрос: можно ли использовать для модуля compress-images, который Вы предлагаете на сайте (текстовой вариант урока) применять как в дополнения для того, чтобы не минифицировались много раз одни и те же картинки, использовать модуль gulp-newer, так как Вы предлагаете это сделать на Видео для другого модуля imagemin, который отстутствует в уроке текстовом на Вашем сайте ?
Здравствуйте. Можете использовать любой из предлагаемых модулей. Но в случае с использованием gulp-imagemin, как в уроке, вам необходимо использовать пакеты модульно, как это сделано в OptimizedHTML 5: github.com/agragregra/oh5
про грустного кота сам пошутил сам посмеялся) но я честно говоря посмеялся тоже)
Спасибо за урок на 4 гульпе.
Почему мы теперь не используем bower?
В основном используем npm, но иногда и bower не грех)
Спасибо. Хороший разбор. Мне понравилось. Есть вопрос: Почему логика выгрузки готового результата имеет промежуточный итог? К примеру, обработанные картинки выгружаются вначале в папку исходника, а затем копируются в финальную папку (dist). То же самое с минифицированными файлами. Почему не сделать напрямую выгрузку в финальную папку dist, без функции копирования?
Потому, что функция сборки не нужна при посадке вёрстки на CMS. Это просто опция.
я просто абалдел, в конце такой чееееее, как это собралось как это мать твою работает xD
МАЭСТРО СПАСИБО ЗА НАУКУ... !!! ПОДСКАЖИ КАК НАСТРОИТЬ GULP НА ОПРЕДЕЛЕННЫЙ БРАУЗЕР ЕСЛИ ПОСЛЕДНИХ НЕСКОЛЬКО В ОС...
Нужный браузер сделать браузером по-умолчанию в системе.
Все сделал полностью из вашего урока, почему-то не собирается gulp build - где можно посмотреть собранную сборку вашу из видео?) понял что ошибка с изображениями там начинает все крашиться) поменял compress-image на image-min, из урока сделал 1 фиг ошибка
Попробуй взять не последнюю, восьмую, версию image-min, а предыдущую, 7.1, у меня с ней все заработало.
github.com/agragregra/OptimizedHTML-5
Вот с последним Imagemin. Модульный Gulpfile и package.json
подскажите,как полностью удалить Gulp из системы?т.е глобально очистить его вообще
Добрый день. Помогите, пожалуйста. Не могу установить gulp-sass, выдает ошибку. Уже все форумы обшарила, но ответа на вопрос не нашла. Что ни делаю - ничего не работает
Кто может подсказать какую ОС он использует?
В данном видео я использовал macOS
Здравствуйте! Обновился плагин gulp-imagemin 8.0.0 требующий импорт в gulp4; подключение const imagemin = require('gulp-imagemin'); выдает ошибку. Сможете найти решение? погуглив, я решения не нашел
Здравствуйте. Проблема решена.
Посмотрите, как это реализовано в OH5: github.com/agragregra/OptimizedHTML-5
В package.json внимание на "type": "module", и обратите внимание на реализацию импорта модулей в gulpfile.js
Привет всем! Не подскажет кто, на WSL Gulp не срабатывают функции с SASS и browserSync (При запуске конвертирует, а в последствии не работает)? На реальной Ubuntu и с помощью консоли Git Bash работает. Хотелось бы работать именно в WSL, т.к. в VS Code терминал Git Bash не сохраняет команды.
Я использую сейчас Git Bash. Для того, чтобы сохранялись команды, следует:
nano ~/.bash_profile
PROMPT_COMMAND='history -a'
Подробнее: webdesign-master.ru/blog/docs/webdev-without-wsl.html
Можете подсказать? Подключаю по аналогии из видео вместо модуля "gulp-imagemin" модуль "compress-images". Запускаю таск и получаю ошибку TypeError: Cannot read properties of undefined (reading 'jpg'). В официальной документации compress-images прописанные функции мне не понятны :((
github.com/agragregra/OptimizedHTML-5
Вот с последним Imagemin. Модульный Gulpfile и package.json
Почему используются константы, а не переменные через var или let? Видел похожую сборку, только там переменные были. Есть какая-то разница?
Учи js и все вопросы отпадут. Var уже давно никто не использует. let и const практически одно и тоже, за исключением того, что const нельзя переопределить.
Какой текстовый редактор использует автор?
Sublime Text
@@wdm а какая тема в сублайме стоит ?
Дмитрий One Dark Material.
Как настроить сборщик, если я стили пишу на SCSS, а не SASS?
Импортируйте Scss в главный Sass-файл и пишите тем синтаксисом, который нравится больше.
@@wdm Благодарю! Не додумался)