Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- Супер крутая вечеринка с galp 4 блекджеком, includ-ом полезных подруг врывается в чат. Настроим графику, получим не только скучный png и jpg, а и поработаем с avif и webp, конвертнем шрифты, то, что нужно для верстки крутого проекта, велком на борт, гайсы.
Сборка на patreon:
www.patreon.co...
Сборка с нуля:
• Gulp 2024, полное руко...
Дружно подписываемся на телеграм:
t.me/from0to1com
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Вот это вечериночка) Большое спасибо за труд!
УРА!) Наконец-то дождались!) В кои то веки будет хороший вечер, рады, что всё хорошо и ты снова с нами, вечериночки это то чего нам не хватало!)
Очень ждал продолжения сборки, Вадим спасибо тебе огромное!!! Выздоравливай!)
спасибо
не хватает только марафонов по верстке :)
спасибо за труд, учитель
спасибо
@@vadymprokopchuk Вадиме, покажіть, будь ласка, в наступній частині gulp модулі js? Окремий js файл на кожну сторінку(в мене не працють скрипти, дивлячись, як Ви робити, хочу зрозуміти, що ж не так в мене(. А ще як зменшувати відео, ну як картинки.
@@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; Де моя помилка???
Смотрю тебя с того момента, когда у тебя еще не было 15-20 тысяч на ютубе. Очень нравится твой контент, делай видосы больше и чаще, так же не забывай про старичков
круто, спасибо
От казалось бы айти это профессия серьезней некуда, и казалось бы обучение айти это вообще напряг сногсшыбательный. Но на какое из твоих видео не посмотрю и такая атмосфера будто с кентом на районе общаюсь и заодно как ты в конце сказал развиваюсь так как оно того стоит. Спасибо Вадим за столь важные, нужные и практические навыки которым ты обучаешь людей.
Просто пушка! Огромное спасибо за свежачек!!
Ооо, это то, чего мы все так долго ждали!😁 Иду ставить чайничек🙌
супер)
Вадим, спасибо!)
Я полдня возился с установкой gulp-include. И ещё покамест нашёл что существует такая сборка... А здесь зашёл и сразу скачал готовую сборку. Будем трудиться!
спасибо, Вадим! Люблю тебя!
Теперь нужна вёрстка с это сборкой с подключением всяких слайдеров и тд чтоб стало ясно)
да да да, согласен
Согласен,нужно чтобы Вадим что-то сверстал на этой сборке,а то есть вопросы как начинаеться верстка.
6:20 - картинки
22:00 - newer
31:40 - svg
40:50 - шрифты
1:00:20 - include HTML
Супер годная вечеринка подъехала ❤👍👍
Бог и вся верстки вернулся
Было бы замечательно увидеть верстку с применением этой сборки😏
Всеми конечностями ЗА...
Якщо в когось не конфертуються шрифти або зберігає не в ту папку - то варто встановити "gulp-fonter-unx", оскільки "gulp-fonter" написаний під вінду.
Я пару годин шукав чому ж конвертація шрифтів некоректно працює.
Спасибо, помог
Ураааааа
Вадим, планируете сделать такие же уроки только с WebPack? Мы очень ждем 🥰🥺
Спасибо, за хороший урок. Лично я для себя немного переделал сборку и разнес все функции по отдельным файлам. Создал папку gulp и там создал файлы под каждую функцию и потом уже инклюдил в gulpfile.
Вадим, 'app/**/*.html' - эта запись переносила твой html в папку images))
Для остальных, в функции building() в src можно явно указать 'app/pages/*.html', тогда лишние html не будет трогать
Дякую)
да да, все так и есть
@@vadymprokopchuk Если прописать 'app/pages/*.html', то в папку dist билдятся просто кусочки кода и комментарии от gulp-include. А вот если 'app/*.html', то уже всё норм) Поправьте если не так, но у меня всё шикарно
@@ВладимирДзех-я7з я поменяла порядок компиляции файлов 'src/**/*.html',
'!src/images/stack/*.html',
'src/images/*.*',
'!src/images/*.svg',
'src/images/sprite.svg',
и тогда stack не переносит
@@elizabethsh8276 привет как я могу с вами связаться Просто я учу gulp я в принц понял данной сборки но остались вопросы
Шедеврально!!!
Очень рады возвращению. Большое спасибо !)
Вадим , спасибо огромное за сборку, требую добавление вебпака в нашу сборочку.
Очень ждал продолжения)
Та же фигня))
@@j-lewis та же фигня =)
Божественно ❤
шедеврально !!!🙂
Волшебно
Спасибо! Лайк, подписка однозначно. Отличная сборка вышла, да и подача супер
Спасибо за вечеринку! Установил всю сборку, все работает. Великолепно
огонь, так держать
Очень понятно, интересно, доступно!!!! Спасибо тебе!
офигенно) Спасибо большое, дождался!))
время пришло)
Сборка просто топчик! Спасибо!
Спасибо большое за сборку!
Спасибо, даже без апгрейдов, офигенная сборка, есть только вот 2024 июля поправочка, автопрефиксер не юзается через require, если устанавливать не версию из видео. Переделал сборку на mjs , завелось.
Кайфую, офигенная вечериночка, спасибо !!!
Только несколько дней назад решил сделать проект на твоей сборке, и всё время не доходили руки посмотреть видео по неë, кажется это видео мой шанс
это продолжение, если все пройдешь будет оч полезно
Как всегда годный контент с отличной подачей!👍
Просто Супер. Спасибо !
Спасибо большое за вашу работу
как же долго этого ждал)))
Мужик реальный
Спасибо, за то что услышал наш молитвы и выпустил эту годноту! :3
Єеее боооой!
Вадос зробив потужний відос!
так, це трапилось =)
Спасибо за труд.)
Шедеврально) по ходу появился вопрос зачем вообще нужны svg спрайт, гугл конечно помог, но хотелось бы пару комментариев, или как то дальше показать когда ты используешь
Отличная сборка! Первая, которая запускается и работает!
супер, рад что помог
Сверстай какой-то лендос на этом всем деле будет интересно и думаю полезно посмотреть на это все в деле
Шедеврально
У кого не работает или неправильно работает avif, webp, imagemin: поставьте версию gulp как у автора в package.json и запустите заново npm i
Привет. А как поставить (можете скинуть)? А то я зеленый и только пытаюсь въехать в галп, повторяя за Вадимом, но на всё выдается такая ошибка: 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'
}
Заранее спасибо!
@@SandyWinman у тебя webp бунтует, просто в файле package.json найди webp и измени цифры его версии на те что у Вадима, а после набери команду npm i, чтобы эта версия загрузилась. Рекомендую все плагины ставить с такой же версией как на видео, чтобы проблем не было
@@ksoar8994 я версии всех плагинов точь в точь переписал как у автора. и удалил папку npm_modules с pacakge-lock.json. потом в консоли заново написал npm i. такая ошибка выходит:
42 vulnerabilities (14 moderate, 28 high)
на это все равно? или написать npm audit fix --force?
Вадим спасибо за твой труд. +++
шедеврально
Спасибо, в дальнейшем по webpack хотелось бы увидеть видео.
Большое спасибо🌺🌺🌺
лучший, спасибо тебе! дай бог здоровья !
хотелось бы еще js кода в верстках.
Так давно Вас не було( Дякую)
я тут, все добре, будь ласка, рухаємося далі
Дякую. Хотелось бы небольшой проект на 3-4 страницы, так что бы компонентно, с gulp, на препроцессоре , с сохранением и работой на Git Hub, а потом натянуьть на wordpress. И вопрос, бывает вообще подходы в верстке когда у тебя верстка изначально максимально гибкая и адаптивная, то есть что бы при адаптиве максимально мало тратить времени?
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
подскажите, как решить?
Тоже самое, у вас получилось решить?
src(['....'], {encoding: false})
@@MarkSizm-de5on тоже такая проблема . Решили эту проблему?
Как вы решили эту проблему?
Просто переустановите gulp на версию ниже чем 5, удалив перед этим текущую версию командой: npm rm gulp, затем установить заново: npm i gulp@4.0.2 -D должно заработать
Спасибо🤩
Гений, молодец 👍👌
Если ваша вечеринка не похожа на это, даже не пытайтесь меня приглашать
спасибо, бро
Шедварительно
Совершенно необходимо добавить функцию при которой закидываешь файл дизайна из фигмы, нажимаешь кнопку и на выходе сразу получаешь деньги, менуя моменты вёрстки и лишнего общения с клиентом 😂😂😂
Спасибо большое
супер 👍
вы обещали в первом видео,показать как объединять несколько джс файлов в один и так и не показали( хотелось бы увидеть
просто грузовик лайков(больше одного нельзя)!!!
Ну во-первых, большое тебе спасибо,
Во-вторых , огромное тебе спасибо.
Ты не только профессионал. но и большой молодец👍
Благодарю
Красавчик !!
не опять А СНОВА!! :)
Насчет переноса sprite.stack.html 1:22:30
Удалось избавится от переноса файла, написав строчку '!app/images/stack/sprite.stack.html' в конце списка, пример кода:
return src(
[
'app/css/style.min.css',
'app/images/*.*',
'!app/images/*.svg',
'app/images/sprite.svg',
'app/fonts/*.*',
'app/js/main.min.js',
'app/**/*.html',
'!app/images/stack/sprite.stack.html',
],
спасибо тебе огромное
Добрый вечер, я 3-й в комментах с такой проблемой ! Исправлена ли она на патреоне? Формат woff через fonter не конвертируется? выдает Read woff error on OpenSans-Bold.woff - Will just copy file... За сборку спасибо.
Решил проблему?
@@dindin5528 нет не решил, мне пока усечённого сборщика хватит, а уж дальше буду развиваться. Полагаю это не готовый продукт, его задача привлечь внимание к курсам. Но, все равно, автору спасибо.
Сэнсей, нужно взять катану и бахнуть по этой сборке марафон по вёрстке!!!!!!!!!!!!!
Спасибо, познавательно. Будет ли подобный гайд для "vite" ? Нынче тоже набирает популярность, особенно в laravel+vue.js
Крутая сборка))) Кстати проблему с выгрузкой папки stack решил путем выставления свойства example в значение false (example: false) в таске sprite()
та тогда файл не будет создаваться, наша проблема в том что в билде написано перенесить все html файли в не зависимости от того где находятся
чому ти не робив збірку під ES 6 модулі, вони ж не підтримують require
Ура🎉🎉🎉
Все работает сделал по видео, по пробую сверстать на ней там будет видно что добавить)
Дуже дякую за урок!
дякую
Я уже подготовил коньячок с кофем для просмотра)))
вот вот, красава
Вот такая вечеринка, Вадос
диджей врубай =)
Папка stack переносится потому что в building идёт сбор html файлов по всем папкам в папке app, а должен идти только по папке app 😉
Топчик
Дайте ссылку на ролик, где верстаем на данной сборке. Либо, пожалуйста, запишите пример верстки используя данную сборку
Спасибо за труды, лучший ^^
Проблема при конвертации .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 работает как надо.
решил проблему с woff?
Newer не работал, всю голову сломал. В конце концов обнаружил маленькую красную точку в vs code, оказывается это была точка остановки, случайно нажал. Ну вдруг у кого-то тоже такое произойдет...
Что касается видео - супер контент, бесценный реально. Будет круто, если потом с помощью этой сборки будет собираться сайтец, вообще кайф наступит. Автору лучи поддержки и огромное спасибо!
чайник уже поставил😀
Сделай какую нибудь верстку мощного проекта на данной сборке😇🥺
Вышел новый сборщик Vite будет ли на него обзор?
Vite - это просто быстрый webpack. Конфигурируется немного проще. Вот и все.
А смысл? Изучать Vite и делать сборку на нём, чтобы потом прийти в любую контору и пересесть за Webpack? Вот когда станет (если станет) популярным, тогда можно переходить, а пока это так, трендовые понты, только и всего. IMHO
@@j-lewis Согласен. Только если интересно для себя и времени свободного вагон.
Да и вообще, бандлеры типа Webpack или Vite заточены, в первую очередь, для SPA. Пытаться сделать из козы овцу - это такое... Но можно интегрировать в галп для обработки всего, что связано с JS-ом.
Я, правда, для этой цели Rollup заюзал (не реклама, не рекомендация).
Дякую за твою працю!
Дякую
Позже сделаю, выложу.
❣
Добродня Вадим! Хотілося би добавити в збірку favicon та про самі favicon подивитися відео від вас в якому форматі і яких розмірів вони повинні бути в 2023 році
Чи є у вас на патріоні макети для практики верстки?
привіт, та я просто не використовую фавікон, вже давно, замість нього використовую просто svg, не бачу сенсу в фавках, тому і в галп без нього
@@sergeytsapliy7071 нажаль немає, але записав як ідею
Підкажіть, будь ласка, як в Prettier вимкнути автозакривання тегів? Не можу поєднати header і footer. Воно закриває header з body в header'i, а потрібно закрити body в footer...
Очень крутая сборка!!! Можно сделать чтобы при добавлении картинки через тег img, в html автоматически прописывалась структура для форматов картинок (avif, webp, img)?
да, можно, снипет записать например
А что делать если в шрифтах всё конвертируется, кроме файлов .woff? При попытке конвертнуть .woff в консоли просто пишет "Read woff error on Roboto-Black.woff - Will just copy file" и просто переносит его в папку fonts, а формата .woff2 этого шрифта не появляется
Допоможіть, будь ласка
Птання. Як зробити. щоб папка stack зявлялась в папці app/images???? Окремо запускаю таск images, потім sprite, і building і все ок, картинки конвертуються, папка stack, файл sprite.svg створюються і в dist все правильно, але коли запускаю повністю збірку gulp, то в папці app.images картинки конвертуються, sprite.svg файла нема і папки stack нема, але в dist sprite.svg файл є і папка stack не перенеслась)
function building() {
return src([
'app/css/style.min.css',
'!app/images/**/*.html',
'app/images/*.*',
'!app/images/*.svg',
'app/images/sprite.svg',
'app/fonts/*.*',
'app/js/main.min.js',
'app/*.html',
], { base: 'app' })
.pipe(dest('dist'))
}
exports.styles = styles;
exports.images = images;
exports.fonts = fonts;
exports.building = building;
exports.sprite = sprite;
exports.scripts = scripts;
exports.watching = watching;
exports.build = series(cleanDist, building);
exports.default = parallel(styles, images, scripts, watching);
Доброго дня Вадим. Дуже дякую вам за ваші відео. В мене питання, чи плануєте ви записати відео як верстати макет на збірці gulp але для новачків? Бо ті відео що у вас є, для мене поки тяжкуваті( це я власне про свої навички).
Чи можливо взагалі таке відео?
Спасибо, вечеринка супер. Но есть одно - НО. Страница не обновляется автоматически. Да, файл индекс в арр обновляется , а сам браузер нет
Получилось решить эту задачу?
@@aleksandervitalevich1299 увы нет(
А что делать со спрайтом свг-шным, и в скомпелированой сборке, картинки на странице не отображаться.
Дуже корисне відео
Вадим, покажи, пожалуйста, в следующем видео как делать sourcemap для scss, в котором есть импорты
Никак не могу заставить работать в своей сборке