GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

Gulp - это менеджер задач и сборщик проектов. Что умеет Gulp? Самостоятельно конвертирует и подключает шрифты, а также записывает подключение в файл стилей. Обновляет браузер. Собирает в один несколько HTML\PUG файлов. Работает с CSS препроцессорами, например SASS(SCSS) и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов с помощью WEBPACK, оптимизирует и сжимает их. Есть возможность работать в синтаксисе ES6. Умеет создавать SVG спрайты, создавать ZIP архив с результатом, Отправлять готовую верстку на FTP сервер и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!
Если возникает ошибка: "[HTML] Error: Callback called multiple times"...
Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов.
Оновився плагін, зараз треба писати
import deleteAsync from "del";
🔴 Скачать готовую сборку (патреон, любой уровень): / 60139630
Спасибо за поддержку бесплатного обучающего контента!
🔴 Функция определения WEBP fls.guru/gulp.html
➕ Плагины от зрителей: gulp-cache, gulp-sharp-responsive
🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: firstvds.ru/s/muckq
✅ Набор на курс по верстке: edu.fls.guru
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
👉 Настройка редактора VS CODE: • VS Code настройка уста...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Курс по верстке: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00:00 - Что умеет Gulp?
00:00:40 - Подготовка к работе. NodeJS, GIT Bush
00:03:16 - Создание Package.json. Включаем ES6 модули.
00:04:58 - Установка GULP. Глобально и в проект
00:06:42 - Структура файлов и папок. Архитектура сборки
00:10:23 - Копирование файлов
00:16:45 - Настройка наблюдателя (watch)
00:20:31 - Очистка папки с результатом
00:22:51 - Обработка HTML/PUG файлов
00:46:09 - Локальный сервер. Автообновление страницы.
00:49:59 - Обработка SASS/SCSS/CSS файлов
01:03:14 - Обработка JavaScript файлов. WEBPACK
01:10:15 - Оптимизация картинок. Создание WEBP
01:17:36 - Конвертация шрифтов. Запись в файл стилей.
01:25:49 - Создание SVG спрайтов.
01:30:37 - Режимы разработчика (dev) и продакшн (build)
01:37:03 - Создание ZIP архива с результатом
01:39:47 - Выгрузка результата на сервер по FTP
01:44:20 - Использование Gulp сборки для нового проекта
01:46:21 - Заключение
👉@IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👉@СЛУШАЙ! Канал с интересными историями из жизни.
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
#обучение #gulp #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©

[@default5646]

Для тех у кого не работает плагин del на новой версии, вставляем это в reset: import {deleteAsync} from "del" export const reset = () => { return deleteAsync(['dist']) }

[@ihtichel]

а почему (['dist']), а не (app.path.clean) ?

[@faraday3429]

Огромное спасибо

[@default5646]

@@ihtichel Можешь и так, это условности

[@solabase8367]

господи боже, я 4 дня разбирался с этой ошибкой и наконец-то нашлось решение, ОГРОМНОЕ ТЕБЕ СПАСИБО. Но там у тебя ошибка вроде незначительная. У меня вот так заработало import { deleteAsync } from "del" export const del = () => { return deleteAsync(['dist']) }

[@user-yw1lv8cc3u]

Спасибо, помогло

[@androiddecolt11]

01:21:57 строчка fs.appendFile отображена не полностью. Отображаю: fs.appendFile(fontsFile, `@font-face{ \tfont-family: ${fontName}; \tfont-display: swap; \tsrc: url("../fonts/${fontFileName}.woff2") format("woff2"), url("../fonts/${fontFileName}.woff") format("woff"); \tfont-weight: ${fontWeight}; \tfont-style: normal; } `, cb);

[@jakhonkhojakhon]

В коде лишний пробел, нужно убрать с "format ("woff");"

[@androiddecolt11]

@@jakhonkhojakhon убрал, спасибо

[@cord9729]

спасибо тебе большое !!!

[@androiddecolt11]

@@cord9729 нет проблем!

[@pavelklm8831]

дай бог тебе здоровья, спасибо

[@olgagolovko6664]

Спасибо ОГРОМНЕЙШЕЕ за то, что ты щедро делишься с нами своими наработками)) Сама я бы это год разбирала🙃

[@user-wf4np1ne2c]

Жека, это мощща! Вопросы, которые накапливались исчезли при просмотре видоса. Сборка агонь! Спасибо за твои труды. И за то, что ты ленивый и оптимизацию такую делаешь)))

[@iventeye]

Очень крутая сборка на 2022 год! Нравится, как Женя продумал оптимизацию и структуризацию. Огонь!🔥

[@FreelancerLifeStyle]

В прошлом видео обнаружилась ошибка (неточность в установке галпа глобально), решил перезалить. Лучше пусть пострадает канал чем ваши знания! 💪 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Курс по верстке: edu.fls.guru 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@StarkElessar]

Женя, моя мечта выйти на доход и делать тебе стабильные донаты! Ты заслуживаешь большего, чем делаешь для нас!

[@bammargera5187]

Золотой ты человек!)

[@user-pt2uz5st7i]

Спасибо большое

[@user-qn7zf9js3y]

Достойный ответ ОТЛИЧНОГО Специалиста! С наступающими Праздниками!

[@cy66a]

Спасибо!

[@BMikel]

Это канал на вес золота. Топ контент. Надо приложиться все усилия чтоб количество подписчиков выросло до 15 млн

[@olgaboiko3023]

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

[@GT__96]

*Позавчера начал смотреть старое видео про Gulp, не успел досмотреть, и вышло свежее видео. Это такая удача для меня! Спасибо большое, Евгений)*

[@Ruslan-ni9mh]

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

[@user-lm9gg6oc6n]

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

[@user-zz8ju3ym1t]

Мощная сборка получилась. Спасибо за огромную проделанную работу!

[@serdar7703]

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

[@artbotguy]

Чел хорош. Не, серьёзно. Как препод точно. У тебя талант к обучению. Не зря набираешь новую группу, хотя говорил, что один только курс проведешь) Видать затянуло. У тебя рил получается. Один из лучших по подаче.

[@selleniya999]

Огромное спасибо за чёткую речь, правильные интонации и позитив. Вы рождённый Учитель. Нам повезло☺

[@user-ub7st9lv6j]

Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен

[@user-zg3sj9jt4t]

Женя спасибо тебе огромное за эту сборку. Сил и здоровья тебе в это непростое время

[@user-cb6ts6zv4p]

Ураааа!!! А то я уже расстроилась, настроение испортилось. Но теперь все снова в полном порядке!!! СПАСИБО!!!!

[@niceman5890]

Очень сложная тема, но спасибо, что разделил видео на определённые блоки!

[@user-pt2uz5st7i]

Блин вот это уровень. К этому нужно стремиться. Мне чтобы осознано всё это настроить, понимать и перестраивать еще очень далеко

[@user-pl6xx3xk9t]

Огромное спасибо. До этого юзал сборку с предыдущего видео про GULP и сталкивался с некоторыми проблемами, которые решились тут. Спасибо Жека, что не стоишь на месте и развиваешься и даешь возможность развиваться остальным вместе с тобой!

[@user-mn1so6hs8z]

Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?

[@vadimkiryanov4933]

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

[@tetianapodleska5575]

Суперский урок! Спасибо огромное за такой подробный и понятный урок!

[@user-rw3oj5nn5t]

Спасибо за огромный труд при создании этого видео. Сборка супер.

[@mikhail_shokun]

Жека, как всегда вовремя, респект тебе и лайкос😎😉

[@yunnazo]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@MrStanly1989]

Большое спасибо!! Очень подробно, очень полезно, просто пушка!!!)) С большим интересом смотрел этот видос и буду смотреть остальные!! Всем рекомендую!!

[@yaroslav8717]

Прекрасный урок, всё работает, всё понятно, красота! :)

[@Natalikashka]

Спасибо Вам огромное!!! Я благодаря Вам оооооочень многому научилась!!!

[@AmerAmer-lt2gz]

извините, у Вас всё полностью получилось??

[@alimanalybek8557]

Помню когда на этом канале всего лишь 7000 подписчиков. Виден колоссальный труд автора на протяжении существования канала.

[@FreelancerLifeStyle]

Спасибо!

[@alimanalybek8557]

@@FreelancerLifeStyle Не за что. Это вам спасибо за увлекательный контент.

[@user-wn6tw4zd3k]

Огромное спасибо за данный материал. У тебя лучшая подача информации! И спасибо всем за комментарии по поводу исправлений и прочих моментов

[@azizbeksamatov4631]

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

[@sadivnytsia]

Спасибки. По вашему видео сделала сборку GULP. Всего 4 дня готово.

[@olegsemenukha4107]

Спасибо, Женя! 😊

[@alexeygumenyuk8510]

Ахренеть какой подробный урок, я даже удивлён. Раньше юзал галп по-мелочи, но теперь, чувствую, заживу))

[@Cats_Dogs.]

Женя, огромное спасибо!!! Надеюсь с Вами все в порядке. Это нереально крутое подробное видео! Для новичка в Gulp - это настоящий клад, подробно объясняете!

[@surpri6e130]

Ёмаё, 3 дня мучился со сборкой, но зато теперь не буду тратить миллион времени при вёрстке!!! Спасибо тебе огромное, Фрилансер!

[@user-lr7yl3fj2u]

привет, очень сильно нужна твоя помощь, на 1:22:08 он перепрыгивает и часть кода теряется, хз что там писать

[@tishkafocovv8723]

я почти ровно месяц на это потратил)

[@nikitaletov930]

@@user-lr7yl3fj2u такая же беда🤣🤣

[@galievramil1169]

Крутой контент, я использовал gulp по скаченному файлу конфигурации из енета! Надо сказать, что возможности у обновление суперские! Автору надо выпустить курс по React

[@pavelm7992]

Спасибо за видео! Как раз с GULPом разбираюсь. Очень актуально!

[@shukonfadah5725]

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

[@artem_doronin]

Жека! Ты просто Бог верстки! Всем новичкам, прежде чем устанавливать gulp (как я пытался сделать в прошлом году), советую сначала освоить азы JS - станет НАМНОГО понятнее работать с галпом.

[@user-ue2kn9km5z]

Спасибо тебе добрый человек что сказал об этом, потратил лишь 1,5 часа на видео ))) Пойду осваивать основы JS для начала !

[@how-to-co-ok]

Капец я исполнил. Начал собирать галп по этому видео а потом оказался на видосе 1летней давности и продолжил по нему😀😀😀

[@koshatskaya9951]

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

[@user-xy5vm6rv5r]

Делаю с Вами сборку и понимаю сколько освобождается времени )))) Спасибо!

[@MegaOooleg]

С института я запомнил лишь одну вещь: - инженер должен быть ленивым, но не в прямом смысле, он должен так оптимизировать процесс, чтобы затрачивать на его исполнение минимум времени и усилий. Вот об этом gulp

[@wyrmeforge]

Очень круто! Сделайте такое же только с Webpack!!

[@Mad__M1ke]

Очень крутой сборщик! Женёк, как всегда всё на высшем уровне!!!

[@poring39]

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

[@Semen_aqw]

о ничего себе ! ну и терпение у тебя !

[@jasonborn4373]

Всё чётко всё прекрасно, одна небольшая ремарочка при создании плагина versionNumber я заметил, что на видео упущен момент о том что плагин versionNumber нужно добавит в терминал npm i -D gulp-version-number так как если этого не сделать то в папке gulp {} version.json создаваться не будет. Короче мало ли вдруг кому пригодится этот комент! Автору очередной огромный RESPECT!!! за грамотную и понятную подачу материала. СПАСИБО!!!

[@mishapokrivchak649]

це було в відео

[@scarboro3689]

Привет Жека, сделай пожалуйста подробный курс по Webpack'у 🥺😀! PS Лайк поставил, а пока смотрю гайд по галп)

[@user-ol4ve5fh2c]

Весь день делал, только шрифты было лень писать но скоро и их доделаю. Очень круто, спасибо!

[@alexlei4232]

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

[@user-tu8lc6wc6q]

Огромное спасибо тебе за твои сборки gulp. Я до сегодняшнего дня пользовался твоей старой сборкой и она была великолепна но вот gulp-2022 это просто вылизанный до идеала gulp. Спасибо тебе огромное, с меня лайк комментарий и благодарность в виде патрона )

[@user-mn1so6hs8z]

Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?

[@JanTalan]

@@user-mn1so6hs8z я фигею все благодарят автора за бесплатную инфу и обучение ..но никто не берет с него пример ..смотрю никто не отвечает на твои вопросы ..какие же жадные люди.я тоже начинающий ..никто не откликается когда надо)))а Жека достойный чел.

[@anonymous_ua]

Очень сложно ) нужно Js учить, без него смотрю как баран на новые ворота на все что происходит 😅 Спасибо большое за контент, вернусь скоро с бОльшим пониманием происходящего. 😀

[@VladislavPodchasov]

Большое спасибо за видео! Крайне полезно! Выше всех похвал!

[@user-lm9ns6cq1d]

Лучшее видео по Gulp! Огромное спасибо!❤

[@cracked8337]

Баги: 53:14 - replace до объединения scss файлов в css. При использовании @img в импортированных файлах в итоговом css @img не заменяется. .pipe(app.plugins.replace(/@img\//g, '../img/')) нужно поместить после sass(...) 01:37:53 - не собирается архив, но при этом нет ошибок. На видео не было показано, как в path.js в path добавляется "buildFolder: buildFolder," из-за чего app.path.buildFolder был равен undefined.

[@Fess292]

Спасибо. А не подскажешь как перенастроить на sass, а не scss?

[@user-ir1hq4hz6s]

Спасибо, помог с @img долго голову ломал

[@user-nf4po3ho4h]

Огромное человеческое спасибо!)

[@MykolaTakshyn]

у першому типу так? .pipe(sass( app.plugins.replace(/@img\//g, '../img/') ))

[@cracked8337]

@@MykolaTakshyn Вообще не понял что ты написал. Мы по порядку применяем метод .pipe с разными параметрами. Тебе нужно поменять порядок этих пайпов, чтобы пути заменялись в sass файлах.

[@royal_aver4403]

Сороковая минута видео, башка сейчас взорвется! Как это запомнит и понять?)) Но в любом случае спасибо за очередное крутое видео! Будем как-то учиться делать так же как и ты без посторонней помощи :)

[@DrMrmld]

Феноменальная работа! Я, считай, только вливаюсь в более серьезный фронтэнд и, найдя это видео, сижу, восхищаясь и с поражением от всей этой красоты.

[@turalinov]

Спасибо большое, Жека! Сегодня обновил свою сборку. За включение в сборку плагина конвертации шрифтов в woff/woff2 отдельное спасибо ;)

[@user-nu3cu5nz4v]

Спасибо большое, мега полезно)) Маленькое замечание - если таск svgSprite не включить в mainTasks, то в режиме дев придется постоянно его отдельно запускать, т.к. при запуске в деве мы ресетим dist и в т.ч. очищаем ранее созданный спрайт

[@Denis-hi7sy]

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

[@sailoks8411]

И как это исправить? Неудобно работать, каждый раз, когда удаляются svg файлы(

[@itKotya]

@@sailoks8411 Здравствуйте, если Ваш вопрос актуален, то вот так. Все задачи после reset. const dev = gulp.series(reset, sprite, mainTasks, gulp.parallel(watcher, server))

[@andsowhat3907]

@@itKotya выдаёт ошибку при такой записи. делала как по видео. в watcher спрайта нету, а в галпфайле есть только експорт svgSprite

[@andsowhat3907]

подскажите, пожалуйста, как включить svgSprite в mainTasks?

[@googlechel]

У кого будет создаваться околесица из шрифтов после написания: вам нужно установить не gulp-fonter, а gulp-fonter-fix, о чем Евгений тактично умолчал

[@olegger7436]

большая благодарность

[@user-bd8jr1jq9z]

спасибо! не конвертировалось в формат woff, теперь все отлично работает

[@user-bd8jr1jq9z]

Может подскажите, к как реализовать в gulp иконочный шрифт?

[@TheMixan25]

Спасибо

[@onfull8166]

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

[@user-us6kh5qw3p]

Спасибо за интересную и актуальную информацию. Очень хороший канал.

[@rozovays]

Ух ты! Отлично! То что мне сейчас и нужно! Спасибо, Жека!

[@koshatskaya9951]

После того как выполнили команду npm i и установили последнюю версию пакета del, откатываемся до рабочей версии командой npm install del@6. а затем в файле reset.js удаляем все и пишем import del from 'del'; export const reset = () => { return del(app.path.clean); };

[@danilonishenko3202]

спасибо братан ты лучший!

[@MegaVADeS]

красава, пофиксил проблему с помощью твоей подсказки !

[@shandies1]

Спасибо!!

[@koshatskaya9951]

@@shandies1 не за что)

[@KomanDante999]

А зачем отказыватся? Не проще ли импорт переписать? Там ведь только asynh нужно добавить в имя.

[@user-lo8ps2hs2u]

Просто на заметку: необязательно устанавливать webpack в качестве дополнительной зависимости, т.к. webpack уже входит в сам webpack-stream ("it is unnecessary to install webpack separately as it is a direct dependency of webpack-stream")

[@Jay-pp4pk]

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

[@mcconfigbladetm1252]

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

[@user-bz5hl1tk1r]

Хорошо, а как быть, когда уже готовые шрифты в woff и woff2? Не формируется файл fonts.scss.Что делать?

[@deniskotov]

Ура, вернулся! А то я расстроиться уже успел)

[@alexon3272]

Шикарный урок! Так давно хотел освоить данный инструмент, а здесь разобрался за 2 часа и уловил всю самую суть. Собрал уже под свой проект, вот такое БОЛЬШОЕ СПАСИБО!

[@JVSd-SG]

у меня выдает ошибки при сборке nmp i: 44 vulnerabilities (2 low, 15 moderate, 23 high, 4 critical) У Вас нет такого?

[@alexon3272]

@@JVSd-SG нет. Будьте внимательны при импорте модулей. У меня однажды IDE незаметно для меня автоматически подставила импорт модуля, из-за чего пришлось поломать голову, что же произошло. Сейчас установил много чего и работает прекрасно

[@user-ub7st9lv6j]

Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен

[@alexon3272]

@@user-ub7st9lv6j в основном файле css импортируешь сторонние файлы @import url("путь до файла")

[@user-wt5wd8cz2d]

Cамый информативный урок! Спасибо!

[@olgareschetilo3253]

Женю, щиро Вам дякую за неймовірні зусилля!!!

[@maximgarkavenko4009]

Жека привет!!! Посмотрел видео про новую сборку gulp и в видео ты затронул Webpack. Я обучался и собирал gulp по твоим урокам, после сборки конечно же начал тренироваться по созданию сайтов и вот тут я столкнулся со множеством проблем, приходилось лечить какие та ошибки которые вообще не должны возникать и почитав про gulp я узнал следующие, крайний раз в него обновления заносили 2 года назад, а по меркам разработки это просто вечность. Ну и как самостоятельная единица он очень проигрывает Webpack. Сейчас я только столкнулся с Webpack и только изучаю его и это очень не просто, у меня два вопроса: 1. Пользуешься ли ты сам Webpack при разработке? 2. И если да, то стоит ли ожидать видео настройки Webpack и о работе с ним?

[@nice_pools]

Цікаво що за проблеми Вас торкнули. Гадаю що Євгеній не буде робити курс по Webpack так як він професіонал в верстці сайтів і Gulp це чудовий інструмент який допомагає в верстці, просто дуже і дуже добре робить свою роботу. Webpack теж класний і потужний інструмент, але не для верстання. Так, в нього є доповнення які теж можуть збирати верстку, але це допоміжні інструменти - Webpack не для цього, це інший інструмент.

[@KomanDante999]

gulp и webpack - это разные инструменты для разных целей. Как бы глупо их сравнивать.

[@mishapokrivchak649]

webpack використовується під капотом в gulp це поперше, по друге хто сказав що за допомогою webpack не збираються сайти? Ще й як збираються, на сьогодні він номер один, а gulp помаленьку відходить.

[@egorkas8166]

Жека, ты невероятен! спасибо тебе от всей души. Желаю миллионов просмотров и преданных платежеспособных патронов. Ну, а я в обойме.

[@anjelikaray7966]

Замечательная сборка. Благодаря Вам научилась работать с Gulp и препроцессорами. Спасибо😌

[@user-dk3ti4yl6d]

Огромное спасибо Евгению! До видео пыталась самостоятельно разобраться с Gulp и сделать сборку, изучила кучу информации. Не вышло) Приступила к видео и делала сборку 4 дня))) Готовую сборку с патреона не использовала, хотела разобраться сама. На разных этапах были ошибки, и с css, и со шрифтами, и до последнего не отображались изображения. Что-то пришлось гуглить, на что-то нашла ответ в комментариях. !!! Для тех, кто сомневается - на 7 сентября 2022г. вся сборка и все плагины рабочие.

[@user-ki8ij8xi9c]

а с установкой gulp-svg-sprite не было проблем? Я тоже все собрала, кроме спрайтов.

[@user-dk3ti4yl6d]

@@user-ki8ij8xi9c нет, со sprite не было проблем

[@arkagole]

Дарья, у вас конвертация из otf в ttf корректно происходит? У меня почему-то otf-файлы как шрифтовые не распознаются

[@dimkazambidis]

Новичкам совет, читайте доку. Возможно, на момент выхода ролика в плагине gulp-file-include, этого не было, но теперь есть @@webRoot, и теперь не надо заморачиваться с gulp-replace, дабы пути к файлам реплейсить

[@KEMP-ln4dv]

а там в пути остаётся точка, с ней можно что нибудь сделать?

[@user-XM6756]

Спасибо большое! Сильная сборка!

[@personagrata3164]

Шикарный полезный урок. Ушла неделя+

[@StRaNNiK471]

JS-функция определения поддержки WebP, которая написана в описании, добавляет классы к тегу body а не к html как сказано в видео, из-за этого webp картинки не отображались при попытке запихнуть их в background... чуть всю сборку не начал переделывать заново

[@andrewsinuk5898]

к стати, заметил, то же самое. Разница ясна. если писать код который есть в описании - даёт на body, а вот если в живую по видео катать - даёт на html

[@user-ds9jt2st9g]

у меня тоже проблема с добавлением класа no-webp. в safari и IE не отображается background.

[@MakcimMotruk]

Ребята , может кто то в курсе почему у меня не подгружаются jpg? А вот svg норм подключаются

[@maximka2246]

У меня не конвертируются картинки из jpg в webp, пишу как в видео. В курсе как решить?

[@user-fo9nn4js4s]

Жека подскажи почему при установке gulp, все устанавливается нормально кроме webp, что в html, что в scss, что в js и т.д, остальное все работает корректно. Голову сломал.🙏

[@user-jc5yr6wz5i]

Видео супер. Отличная сборка.

[@KomAlexei]

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

[@user-xr3bl7cr1o]

нарешті я його дожала😝 3 дні над ним мучилась, потім підписалась на патрон і скачала😝 пройшла знову відео інструкцію і радуюсь🎉 висновок: ставайте патронами❤

[@tishkafocovv8723]

у кого проблема с чисткой файла,попробуйте заменить установку npm install -D del на npm install del@6,у меня помогло

[@antoncigur2724]

Спасибо

[@sofyap.2153]

Спасибо за прекрасную подачу материала! Только для Мака notify пришлось самой настраивать. Хороший плагин.

[@ileatvazazelpro316]

Спасибо огромное за сборку, проделали колоссальную работу, всё отлично работает! Убил на это несколько дней, но оно того стоило😂 (Не прописывайте npm audit fix - может поломать проект)

[@user-kf4fk8fi5i]

может кто-то столкнулся с проблемой path-autocomplete: 1. не предлагает путь к файлам @img/ (но в итоге работает и все конвертирует) 2. начало дублировать файлы когда просто выбираешь путь например ./ (других плагинов вроде не нашел чтоб был конфликт, может как-то стандартные функции отключить можно чтоб не дублировало?)

[@user-sv8ty6yh8k]

Видео очень классное во всех отношениях: содержание, подача, информативность... Но у меня есть несколько вопросов. 1. почему для задания путей не использовать тот же path из nodejs? Например так, path.join(__dirname, "src", "img"). Не видел такого ни в одном видео. 2. пробовал применять сборку на проекте с большим количеством картинок. Картинки копируются не все. Как правило копируются те, чье разрешение указано первым в списке разрешений. Как это победить? 3. Почему надо подключать более оптимизированный код в файл подключения шрифтов, ведь в конце концов этот файл тоже будет обработан в дальнейшем плагином и должен быть приведен к минифицированному виду, а править такой код если что сложнее? Не сочтите за придирки или зазнайство, просто мне интересно знать, возможно я чего-то не знаю или не понимаю. P.S. Оптимизированный вариант у меня сработал, а просто текст нет. когда описывал путь, добавил пробелы после запятой, разделяющей расширения... это и стало причиной неправильной работы gulp

[@y_uraaaaa]

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

[@AmerAmer-lt2gz]

привет! у тебя всё получилось из этого видео ?

[@langonar]

Спасибо за качественную сборку! Как раз искал подобное руководство :)

[@AmerAmer-lt2gz]

извините, у вас всё полностью получилось ??

[@langonar]

@@AmerAmer-lt2gz Всё что описывалось в гайде, получилось. Плюс прикрутил генерацию вафиконок и файл-манифеста. А генерацию woff(2) шрифтов и минификацию картинок (дополнительно использовал tiny png) вынес в отдельный сценарий npm run prepare

[@user-sx9pi4vq3w]

Если проблеммы с Sass и пишет что то типа "SyntaxError: Cannot use import statement outside a module"(ссылаясь перед этим на sass!) или "SyntaxError: The requested module 'sass' does not provide an export named 'default'" , то у меня решилось заменной в файле tasks/scss.js первой строки из " import dartSass from 'sass'" на "import * as dartSass from 'sass';"

[@user-yi8nc3rs2r]

спасибі допомогло)

[@user-so4kb2wp5z]

$ gulp `import sass from 'sass'` is deprecated. Please use `import * as sass from 'sass'` instead. У меня такое сообщение, меняю первую строку на ту,что у Вас в комментарии и все равно не работает, такую выдает Error: Invalid glob argument: undefined, не подскажите в чем проблема?

[@alexandrternovsky4058]

@@user-so4kb2wp5z import * as dartSass from 'sass' import gulpSass from 'gulp-sass'; import rename from 'gulp-rename'; import cleanCss from 'gulp-clean-css'; // Сжатие CSS файла import webpcss from 'gulp-webpcss'; // Вывод WEBP изображений import autoprefixer from 'gulp-autoprefixer'; // Добавление вендорных префиксов import groupCssMediaQueries from 'gulp-group-css-media-queries'; // Группировка медиа запросов const sass = gulpSass(dartSass);

[@DNValeria]

Здравствуйте. Столкнулась с такой проблемой. При первом запуске gulp сборка вроде бы проходит хорошо, но папочка dist не создается автоматически. В чем может быть проблема? Если четко следовала шагам по видео и ошибок или различий никаких не нашла.

[@user-yp2mf6wl1t]

думаю, надо сначала npm run svgSprive, потом npm run dev

[@user-if6vn1oc8p]

Что сказать, крутой парень! Я вообще не любитель комментариев, но тут, как говорится, не удержался))) Спасибо Вам Евгений, все очень интересно и профессионально. Красавчик!!!

[@anri_khv]

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

[@user-ub7st9lv6j]

Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен

[@meowwyay]

А что значит в режиме разработчика и продакшена?

[@i.g.2426]

Ща буду делать.Будет как всегда наверное Ракета,бомба,петарррдааа!!:) как раз каникулы в институте,хоть отдохну от немецкой речи и java курса

[@artgas_pro]

Единственный момент который мне не подошел в этой сборке это то что функция reset была включена в общий сценарий, из за этого у меня не сохранялась скрол позиция при изменении HTML файлов и мне всё время при их обновлении приходилось прокачивать колесом свой палец )))). В общем я вынес reset из общего сценария и стал запускать отдельно: const order = gulp.series(reset, mainTasks) . Теперь скрол позиция сохраняется даже при изменении HTML файла (она остается на том же блоке что и была). А порядок в файлах можно навести одной отдельной командой npm run reset. Жене отдельное спасибо за сборку, как всегда на высоте !!!

[@user-zh7vl7gk2r]

Если у кого-то не попадают png в проект или они не преобразуются в webp, проверьте чтобы в правиле, где перечисляются расширения картинок ОТСУТСТВОВАЛИ ПРОБЕЛЫ после запятой, иначе, будут скопирован или преобразован ТОЛЬКО ПЕРВЫЙ тип расширения, а остальные будут ПРОИГНОРИРОВАНЫ. Евгений, заметил такую неточность. Если в проекте есть шрифты в формате woff или woff2 (именно они существовали, до преобразования из otf или ttf), то они не попадают в папку dist/fonts, а также не создается с ними файл fonts.scss. На этапе копирования папок, можно задать, чтобы они сразу (woff и woff2) копировались в dist/fonts. P.S. Евгений, спасибо тебе огромное! Супер полезное видео!!!

[@kosmo8550]

Можешь помочь, пожалуйста? Откуда брать продолжение в функции конвертации шрифтов fs.append(fontsFile, `@font-face { \tfont-family: ${fontName}; \tfont-display: swap; \tsrc: url("../fonts/${font}")}`, а дальше не видно

[@AmerAmer-lt2gz]

@@kosmo8550 вот именно! уже 10 дней прошу людей поделиться =) но никто не хочет

[@kosmo8550]

@@AmerAmer-lt2gz если найду, обязательно скину)

[@AmerAmer-lt2gz]

@@kosmo8550 спасибо!

[@kosmo8550]

@@AmerAmer-lt2gz Вам скинулся ответ? Просто у меня как будто комментарий удаляется

[@jenyaspace]

Давай еще урок по Webpack)

[@FreelancerLifeStyle]

Ок