Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite
Супер крутая вечеринка с galp 4 блекджеком, includ-ом полезных подруг врывается в чат. Настроим графику, получим не только скучный png и jpg, а и поработаем с avif и webp, конвертнем шрифты, то, что нужно для верстки крутого проекта, велком на борт, гайсы.
Сборка на patreon:
www.patreon.com/posts/gulp-po...
Сборка с нуля:
• Gulp 2024, полное руко...
Дружно подписываемся на телеграм:
t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Пікірлер: 323
Вот это вечериночка) Большое спасибо за труд!
УРА!) Наконец-то дождались!) В кои то веки будет хороший вечер, рады, что всё хорошо и ты снова с нами, вечериночки это то чего нам не хватало!)
Очень ждал продолжения сборки, Вадим спасибо тебе огромное!!! Выздоравливай!)
@vadymprokopchuk
Жыл бұрын
спасибо
Просто пушка! Огромное спасибо за свежачек!!
Спасибо! Лайк, подписка однозначно. Отличная сборка вышла, да и подача супер
Ооо, это то, чего мы все так долго ждали!😁 Иду ставить чайничек🙌
@vadymprokopchuk
Жыл бұрын
супер)
Вадим, спасибо!) Я полдня возился с установкой gulp-include. И ещё покамест нашёл что существует такая сборка... А здесь зашёл и сразу скачал готовую сборку. Будем трудиться!
Очень понятно, интересно, доступно!!!! Спасибо тебе!
Божественно ❤
Как всегда годный контент с отличной подачей!👍
Смотрю тебя с того момента, когда у тебя еще не было 15-20 тысяч на ютубе. Очень нравится твой контент, делай видосы больше и чаще, так же не забывай про старичков
@vadymprokopchuk
Жыл бұрын
круто, спасибо
офигенно) Спасибо большое, дождался!))
@vadymprokopchuk
Жыл бұрын
время пришло)
Спасибо за вечеринку! Установил всю сборку, все работает. Великолепно
@vadymprokopchuk
Жыл бұрын
огонь, так держать
не хватает только марафонов по верстке :) спасибо за труд, учитель
@vadymprokopchuk
Жыл бұрын
спасибо
@ob5804
Жыл бұрын
@@vadymprokopchuk Вадиме, покажіть, будь ласка, в наступній частині gulp модулі js? Окремий js файл на кожну сторінку(в мене не працють скрипти, дивлячись, як Ви робити, хочу зрозуміти, що ж не так в мене(. А ще як зменшувати відео, ну як картинки.
@ob5804
11 ай бұрын
@@vadymprokopchuk Вадиме, привіт. Питання по таску фонтс. Коли Ви не прописали *.* в return src('app/fonts/src'), то помилка була is not accepted type of font. Will just copy file, коли ж прописали *.*, то помилка вирішилась, а я прописала і одна помилка змінилась на цю [09:38:41] Starting 'fonts'... Read woff error on test-woff.woff - Will just copy file [09:38:53] Finished 'fonts' after 12 s шрифт test-woff.woff не переводиться в woff2( 9 все ок, а цей ну ніяк const fonter = require('gulp-fonter'); const ttf2woff2 = require('gulp-ttf2woff2'); function fonts() { return src('app/fonts/src/*.*') .pipe(fonter({ formats: ['woff', 'ttf'] })) .pipe(src('app/fonts/*.ttf')) .pipe(ttf2woff2()) .pipe(dest('app/fonts')) } function building() { 'app/fonts/*.*', } exports.fonts = fonts; Де моя помилка???
спасибо, Вадим! Люблю тебя!
Спасибо большое за вашу работу
Очень рады возвращению. Большое спасибо !)
шедеврально !!!🙂
Просто Супер. Спасибо !
Шедеврально!!!
Спасибо большое за сборку!
Супер годная вечеринка подъехала ❤👍👍
как же долго этого ждал)))
Спасибо за труд.)
Спасибо, за то что услышал наш молитвы и выпустил эту годноту! :3
Спасибо, за хороший урок. Лично я для себя немного переделал сборку и разнес все функции по отдельным файлам. Создал папку gulp и там создал файлы под каждую функцию и потом уже инклюдил в gulpfile.
Волшебно
Сборка просто топчик! Спасибо!
Вадим, 'app/**/*.html' - эта запись переносила твой html в папку images)) Для остальных, в функции building() в src можно явно указать 'app/pages/*.html', тогда лишние html не будет трогать
@ob5804
Жыл бұрын
Дякую)
@vadymprokopchuk
Жыл бұрын
да да, все так и есть
@user-yu7ty5xg2p
Жыл бұрын
@@vadymprokopchuk Если прописать 'app/pages/*.html', то в папку dist билдятся просто кусочки кода и комментарии от gulp-include. А вот если 'app/*.html', то уже всё норм) Поправьте если не так, но у меня всё шикарно
@elizabethsh8276
Жыл бұрын
@@user-yu7ty5xg2p я поменяла порядок компиляции файлов 'src/**/*.html', '!src/images/stack/*.html', 'src/images/*.*', '!src/images/*.svg', 'src/images/sprite.svg', и тогда stack не переносит
@user-vg5ln5tg9d
Жыл бұрын
@@elizabethsh8276 привет как я могу с вами связаться Просто я учу gulp я в принц понял данной сборки но остались вопросы
Вадим спасибо за твой труд. +++
Очень ждал продолжения)
@j-lewis
Жыл бұрын
Та же фигня))
@vadymprokopchuk
Жыл бұрын
@@j-lewis та же фигня =)
Вадим , спасибо огромное за сборку, требую добавление вебпака в нашу сборочку.
Большое спасибо🌺🌺🌺
Так давно Вас не було( Дякую)
@vadymprokopchuk
Жыл бұрын
я тут, все добре, будь ласка, рухаємося далі
Шедеврально
От казалось бы айти это профессия серьезней некуда, и казалось бы обучение айти это вообще напряг сногсшыбательный. Но на какое из твоих видео не посмотрю и такая атмосфера будто с кентом на районе общаюсь и заодно как ты в конце сказал развиваюсь так как оно того стоит. Спасибо Вадим за столь важные, нужные и практические навыки которым ты обучаешь людей.
Красавчик !!
Ураааааа
шедеврально
Спасибо большое!
Гений, молодец 👍👌
лучший, спасибо тебе! дай бог здоровья ! хотелось бы еще js кода в верстках.
Теперь нужна вёрстка с это сборкой с подключением всяких слайдеров и тд чтоб стало ясно)
@vadymprokopchuk
Жыл бұрын
да да да, согласен
@sergeevalexander4695
4 ай бұрын
Согласен,нужно чтобы Вадим что-то сверстал на этой сборке,а то есть вопросы как начинаеться верстка.
Єеее боооой! Вадос зробив потужний відос!
@vadymprokopchuk
Жыл бұрын
так, це трапилось =)
Мужик реальный
6:20 - картинки 22:00 - newer 31:40 - svg 40:50 - шрифты 1:00:20 - include HTML
Спасибо!
Дуже дякую за урок!
@vadymprokopchuk
10 ай бұрын
дякую
Спасибо, в дальнейшем по webpack хотелось бы увидеть видео.
Топчик
супер 👍
Спасибо🤩
спасибо тебе огромное
Бог и вся верстки вернулся
Было бы замечательно увидеть верстку с применением этой сборки😏
@makcmakc963
9 ай бұрын
Всеми конечностями ЗА...
Спасибо большое
просто грузовик лайков(больше одного нельзя)!!! Ну во-первых, большое тебе спасибо, Во-вторых , огромное тебе спасибо. Ты не только профессионал. но и большой молодец👍
@vadymprokopchuk
Жыл бұрын
Благодарю
Отличная сборка! Первая, которая запускается и работает!
@vadymprokopchuk
3 ай бұрын
супер, рад что помог
Шедварительно
Ура🎉🎉🎉
Крутая сборка))) Кстати проблему с выгрузкой папки stack решил путем выставления свойства example в значение false (example: false) в таске sprite()
@vadymprokopchuk
Жыл бұрын
та тогда файл не будет создаваться, наша проблема в том что в билде написано перенесить все html файли в не зависимости от того где находятся
Только несколько дней назад решил сделать проект на твоей сборке, и всё время не доходили руки посмотреть видео по неë, кажется это видео мой шанс
@vadymprokopchuk
Жыл бұрын
это продолжение, если все пройдешь будет оч полезно
Дякую за твою працю!
@vadymprokopchuk
3 ай бұрын
Дякую
Сверстай какой-то лендос на этом всем деле будет интересно и думаю полезно посмотреть на это все в деле
❣
Все работает сделал по видео, по пробую сверстать на ней там будет видно что добавить)
Шедеврально) по ходу появился вопрос зачем вообще нужны svg спрайт, гугл конечно помог, но хотелось бы пару комментариев, или как то дальше показать когда ты используешь
не опять А СНОВА!! :)
Вадим, планируете сделать такие же уроки только с WebPack? Мы очень ждем 🥰🥺
Я уже подготовил коньячок с кофем для просмотра)))
@vadymprokopchuk
Жыл бұрын
вот вот, красава
Starting 'images'... [22:51:54] 'images' errored after 69 ms [22:51:54] Error in plugin "gulp-avif" Message: .webp not supported Details: domainEmitter: [object Object] domainThrown: false подскажите, как решить?
@MarkSizm-de5on
5 ай бұрын
Тоже самое, у вас получилось решить?
@vurgunkafarzada3008
Ай бұрын
src(['....'], {encoding: false})
@user-oj4oc4dw4w
Ай бұрын
@@MarkSizm-de5on тоже такая проблема . Решили эту проблему?
@user-oj4oc4dw4w
Ай бұрын
Как вы решили эту проблему?
@user-kz4it6qr4j
Ай бұрын
Просто переустановите gulp на версию ниже чем 5, удалив перед этим текущую версию командой: npm rm gulp, затем установить заново: npm i gulp@4.0.2 -D должно заработать
Дуже корисне відео
чайник уже поставил😀
Вот такая вечеринка, Вадос
@vadymprokopchuk
Жыл бұрын
диджей врубай =)
Добрый вечер, я 3-й в комментах с такой проблемой ! Исправлена ли она на патреоне? Формат woff через fonter не конвертируется? выдает Read woff error on OpenSans-Bold.woff - Will just copy file... За сборку спасибо.
@dindin5528
11 ай бұрын
Решил проблему?
@user-kf6qe5nl8f
11 ай бұрын
@@dindin5528 нет не решил, мне пока усечённого сборщика хватит, а уж дальше буду развиваться. Полагаю это не готовый продукт, его задача привлечь внимание к курсам. Но, все равно, автору спасибо.
Круто круто - однозначно топчик, нас услышали! Ещё бы сборку с таким функционалом на Vite было бы круто , Vite намного быстрее Gulp-а и web-paka. Годных сборок на него нет , гайдов тоже , я свою сборку делал по звёздам ( дока не написана на языке плебса). Такая сборка на vite - порвала бы русский ютубчик.
@alext5030
Жыл бұрын
Очень интересно узнать у топящих за бандлеры: вы сами-то пробовали сделать сборку банлера какого-нибудь, подходящую для верстки МНОГОСТРАНИЧНИКА? Не интегрировать ограниченный (js-ом) функционал бандлера в Галп, а именно сделать самостоятельную сборку. /me пошел за попкорном
@Beyond-the-transcendent
Жыл бұрын
@@alext5030 там есть настройка многостраничности и да делаю сейчас на нём многостраничник
@Beyond-the-transcendent
Жыл бұрын
@@alext5030 странички только нужно ручками писать, а дальше ложишь на pug
@Beyond-the-transcendent
Жыл бұрын
@@alext5030 ну ладно по скорости возмно и так, но пока он шустрее .
@Beyond-the-transcendent
Жыл бұрын
@@alext5030 и ещё ты пишешь что вебпак только для spa тогда поясни чем кроме можно из JS библитеки на 500 модулей вытащить в билд только те что юзаешь при этом там чисто твои функции, которые ты подменяешь под разные проекты.
Спасибо, познавательно. Будет ли подобный гайд для "vite" ? Нынче тоже набирает популярность, особенно в laravel+vue.js
Очень крутая сборка!!! Можно сделать чтобы при добавлении картинки через тег img, в html автоматически прописывалась структура для форматов картинок (avif, webp, img)?
@vadymprokopchuk
Жыл бұрын
да, можно, снипет записать например
Позже сделаю, выложу.
Спасибо большое за труд!! Можно вопрос? Какие svg нужно обязательно добавлять в спрайт?
@vadymprokopchuk
Жыл бұрын
но тут от проекта зависит, но обычно все)
@asgard1428
Жыл бұрын
@@vadymprokopchuk понял. Я где-то читал, что туда вроде как добавляют иконки которые интерактивные, стрелочки, соцсети и так далее, а статичные нет.
Дякую. Хотелось бы небольшой проект на 3-4 страницы, так что бы компонентно, с gulp, на препроцессоре , с сохранением и работой на Git Hub, а потом натянуьть на wordpress. И вопрос, бывает вообще подходы в верстке когда у тебя верстка изначально максимально гибкая и адаптивная, то есть что бы при адаптиве максимально мало тратить времени?
Спасибо за труды, лучший ^^ Проблема при конвертации .woff В документашке пишут: " woff files Currently fonteditor-core is having some problems with woff files as source. Please not use woff files as source if You no need to. " так что если у вас не работает конвертация .woff, то не удивляйтесь. P.s. С .woff2 и .ttf работает как надо.
@dindin5528
11 ай бұрын
решил проблему с woff?
Сэнсей, нужно взять катану и бахнуть по этой сборке марафон по вёрстке!!!!!!!!!!!!!
Если ваша вечеринка не похожа на это, даже не пытайтесь меня приглашать
@vadymprokopchuk
Жыл бұрын
спасибо, бро
Совершенно необходимо добавить функцию при которой закидываешь файл дизайна из фигмы, нажимаешь кнопку и на выходе сразу получаешь деньги, менуя моменты вёрстки и лишнего общения с клиентом 😂😂😂
Сделай какую нибудь верстку мощного проекта на данной сборке😇🥺
Доброго дня Вадим. Дуже дякую вам за ваші відео. В мене питання, чи плануєте ви записати відео як верстати макет на збірці gulp але для новачків? Бо ті відео що у вас є, для мене поки тяжкуваті( це я власне про свої навички). Чи можливо взагалі таке відео?
Добродня Вадим! Хотілося би добавити в збірку favicon та про самі favicon подивитися відео від вас в якому форматі і яких розмірів вони повинні бути в 2023 році
@sergeytsapliy7071
Жыл бұрын
Чи є у вас на патріоні макети для практики верстки?
@vadymprokopchuk
Жыл бұрын
привіт, та я просто не використовую фавікон, вже давно, замість нього використовую просто svg, не бачу сенсу в фавках, тому і в галп без нього
@vadymprokopchuk
Жыл бұрын
@@sergeytsapliy7071 нажаль немає, але записав як ідею
У кого не работает или неправильно работает avif, webp, imagemin: поставьте версию gulp как у автора в package.json и запустите заново npm i
@SandyWinman
3 ай бұрын
Привет. А как поставить (можете скинуть)? А то я зеленый и только пытаюсь въехать в галп, повторяя за Вадимом, но на всё выдается такая ошибка: Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Слава\Desktop\Frontend\gulp-start ode_modules\gulp-webp\index.js from C:\Users\Слава\Desktop\Frontend\gulp-start\gulpfile.js not supported. Instead change the require of index.js in C:\Users\Слава\Desktop\Frontend\gulp-start\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (C:\Users\Слава\Desktop\Frontend\gulp-start\gulpfile.js:11:14) { code: 'ERR_REQUIRE_ESM' } Заранее спасибо!
@ksoar8994
3 ай бұрын
@@SandyWinman у тебя webp бунтует, просто в файле package.json найди webp и измени цифры его версии на те что у Вадима, а после набери команду npm i, чтобы эта версия загрузилась. Рекомендую все плагины ставить с такой же версией как на видео, чтобы проблем не было
@deanwichester6412
Ай бұрын
помогло 👍👍👍
Хай)) В эту сборку можно добавить TailwindCSS?
Папка stack переносится потому что в building идёт сбор html файлов по всем папкам в папке app, а должен идти только по папке app 😉
Очень классная подача! Спасибо! Есть вопрос по fonter, у меня стартует, финиширует, но между этим «not support cmap format:14» и в папке без изменений, может кто-то знает почему и может подсказать?
@user-gw1ro4re3v
10 ай бұрын
А нет, сори, не без изменений, закидывает сформатированные шрифты в папку app, наверное путь неправильный, пробую менять, но все равно так закидывает
@user-gw1ro4re3v
10 ай бұрын
С форматом разобралась, а вот путь… 🙄
Вышел новый сборщик Vite будет ли на него обзор?
@alext5030
Жыл бұрын
Vite - это просто быстрый webpack. Конфигурируется немного проще. Вот и все.
@j-lewis
Жыл бұрын
А смысл? Изучать Vite и делать сборку на нём, чтобы потом прийти в любую контору и пересесть за Webpack? Вот когда станет (если станет) популярным, тогда можно переходить, а пока это так, трендовые понты, только и всего. IMHO
@alext5030
Жыл бұрын
@@j-lewis Согласен. Только если интересно для себя и времени свободного вагон. Да и вообще, бандлеры типа Webpack или Vite заточены, в первую очередь, для SPA. Пытаться сделать из козы овцу - это такое... Но можно интегрировать в галп для обработки всего, что связано с JS-ом. Я, правда, для этой цели Rollup заюзал (не реклама, не рекомендация).
Привет Вадим! Подскажи пожалуйста, какой смысл в include, если при изменении в дальнейшем чего либо в компоненте, нужно в файле в который делаешь инклюд удалять ранее вставленное и по новой прописывать инклюд. Может я чего то не понимаю. Спасибо!
@vadimstukalov4873
2 ай бұрын
Разобрался) я просто решил, зачем все html файлы переносить в отдельный каталог pages и прописал, что бы он брал эти файлы из app и возвращал же в app.))
Дайте ссылку на ролик, где верстаем на данной сборке. Либо, пожалуйста, запишите пример верстки используя данную сборку
Будет ли марафон для старичков с этой сборкой?)
@vadymprokopchuk
Жыл бұрын
посмотрим, вероятно
Вадим, покажи, пожалуйста, в следующем видео как делать sourcemap для scss, в котором есть импорты Никак не могу заставить работать в своей сборке
Вадим подскажи пожалуйста, когда убираю куски кода в header и footer как на 1:07:31, то Vs code ругается желтым, мол ошибки в коде, т.к. на каждой странице он как бы не завершен. У тебя же такого нет на видео. Как сделать чтобы этого не было?)
Добрый вечер, подскажите зачем мне получать в папку dist из одной картинки три одинаковых картинки в разных форматах пусть они и весят меньше...что то я не совсем понимаю. Может где то что то прослушал.
А что делать со спрайтом свг-шным, и в скомпелированой сборке, картинки на странице не отображаться.