GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта
Vložit
- čas přidán 16. 06. 2024
- 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 #фрилансерпожизни
🤟 Живи, а работай в свободное время! ©
Для тех у кого не работает плагин del на новой версии, вставляем это в reset:
import {deleteAsync} from "del"
export const reset = () => {
return deleteAsync(['dist'])
}
а почему (['dist']), а не (app.path.clean) ?
Огромное спасибо
@@ihtichel Можешь и так, это условности
господи боже, я 4 дня разбирался с этой ошибкой и наконец-то нашлось решение, ОГРОМНОЕ ТЕБЕ СПАСИБО. Но там у тебя ошибка вроде незначительная. У меня вот так заработало
import { deleteAsync } from "del"
export const del = () => {
return deleteAsync(['dist'])
}
Спасибо, помогло
В прошлом видео обнаружилась ошибка (неточность в установке галпа глобально), решил перезалить. Лучше пусть пострадает канал чем ваши знания! 💪
🔴 Карта канала: 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
Женя, моя мечта выйти на доход и делать тебе стабильные донаты! Ты заслуживаешь большего, чем делаешь для нас!
Золотой ты человек!)
Спасибо большое
Достойный ответ ОТЛИЧНОГО Специалиста! С наступающими Праздниками!
Спасибо!
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);
В коде лишний пробел, нужно убрать с "format ("woff");"
@@jakhonkhojakhon убрал, спасибо
спасибо тебе большое !!!
@@cord9729 нет проблем!
дай бог тебе здоровья, спасибо
Жека, это мощща!
Вопросы, которые накапливались исчезли при просмотре видоса. Сборка агонь! Спасибо за твои труды. И за то, что ты ленивый и оптимизацию такую делаешь)))
Спасибо ОГРОМНЕЙШЕЕ за то, что ты щедро делишься с нами своими наработками))
Сама я бы это год разбирала🙃
отличное видео, отличный канал, отличный и харизматичный учитель!!! спасибо огромное за труд!!!! с наступающим новым годом!!! от души желаю вам успехов в развитии канала и всего только самого наилучшего по жизни))))))....спасибо огромнейшие, от души спасибо!!!!
*Позавчера начал смотреть старое видео про Gulp, не успел досмотреть, и вышло свежее видео. Это такая удача для меня! Спасибо большое, Евгений)*
Сборка супер! Все получилось и работает! Главное внимательность. Евгений, большущее спасибо вам за вашу работу! Сил и процветания в дальнейшем!!!
Жека привет а считаю наоборот канал не пострадает ,а ты просто красавчик признаешь свои ошибки и так заботишься о своей аудитории !!!!!!! Спасибо Тебе и Всего Наилучшего !!!!!
Это канал на вес золота. Топ контент. Надо приложиться все усилия чтоб количество подписчиков выросло до 15 млн
Чел хорош. Не, серьёзно. Как препод точно. У тебя талант к обучению. Не зря набираешь новую группу, хотя говорил, что один только курс проведешь) Видать затянуло. У тебя рил получается. Один из лучших по подаче.
Мощная сборка получилась. Спасибо за огромную проделанную работу!
Так сложно садиться за непонятный новый материал, но по вашим видео спустя время начинаешь всё понимать, спасибо!
Очень крутая сборка на 2022 год! Нравится, как Женя продумал оптимизацию и структуризацию. Огонь!🔥
Ураааа!!! А то я уже расстроилась, настроение испортилось. Но теперь все снова в полном порядке!!! СПАСИБО!!!!
Женя спасибо тебе огромное за эту сборку. Сил и здоровья тебе в это непростое время
Блин вот это уровень. К этому нужно стремиться. Мне чтобы осознано всё это настроить, понимать и перестраивать еще очень далеко
Очень круто! Спасибо за обновленное видео, т.к. по старому было много нюансов, из-за которых галп отказывался корректно работать. Надеюсь, с этой версией все будет в порядке)
Огромное спасибо за чёткую речь, правильные интонации и позитив. Вы рождённый Учитель. Нам повезло☺
Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен
Огромное спасибо. До этого юзал сборку с предыдущего видео про GULP и сталкивался с некоторыми проблемами, которые решились тут. Спасибо Жека, что не стоишь на месте и развиваешься и даешь возможность развиваться остальным вместе с тобой!
Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?
Очень сложная тема, но спасибо, что разделил видео на определённые блоки!
Жека, как всегда вовремя, респект тебе и лайкос😎😉
Суперский урок! Спасибо огромное за такой подробный и понятный урок!
Большое спасибо!! Очень подробно, очень полезно, просто пушка!!!)) С большим интересом смотрел этот видос и буду смотреть остальные!! Всем рекомендую!!
Ууух, спасибо большое за обновленное видео!!! Я только закончила сборку по старому видео, как на следующий день вышло это. Ну и жаркая у меня была неделька, но все работает на отлично! Спасибо, еще раз!!!
Пожалуйста!
Помню когда на этом канале всего лишь 7000 подписчиков. Виден колоссальный труд автора на протяжении существования канала.
Спасибо!
@@FreelancerLifeStyle Не за что. Это вам спасибо за увлекательный контент.
Ахренеть какой подробный урок, я даже удивлён. Раньше юзал галп по-мелочи, но теперь, чувствую, заживу))
Отличная сборка. Автору огромное спасибо за такой качественный урок. Всё коротко и чётка расставлено по полочке. Немножко жалко что дальнейшие уроки мне не понять. Но всё равно огромное спасибо. Привет из Узбекистана. 👋👋👋
Спасибо Вам огромное!!! Я благодаря Вам оооооочень многому научилась!!!
извините, у Вас всё полностью получилось??
Прекрасный урок, всё работает, всё понятно, красота! :)
Делаю с Вами сборку и понимаю сколько освобождается времени )))) Спасибо!
Спасибки. По вашему видео сделала сборку GULP. Всего 4 дня готово.
Крутой контент, я использовал gulp по скаченному файлу конфигурации из енета! Надо сказать, что возможности у обновление суперские!
Автору надо выпустить курс по React
Огромное спасибо! 2 часа видоса воспроизводил часов 5)) впервые коснулся этой темы сборок, очень интересно
о ничего себе ! ну и терпение у тебя !
Огромное спасибо за данный материал. У тебя лучшая подача информации! И спасибо всем за комментарии по поводу исправлений и прочих моментов
Капец я исполнил. Начал собирать галп по этому видео а потом оказался на видосе 1летней давности и продолжил по нему😀😀😀
Всё чётко всё прекрасно, одна небольшая ремарочка при создании плагина versionNumber я заметил, что на видео упущен момент о том что плагин versionNumber нужно добавит в терминал npm i -D gulp-version-number так как если этого не сделать то в папке gulp {} version.json создаваться не будет. Короче мало ли вдруг кому пригодится этот комент! Автору очередной огромный RESPECT!!! за грамотную и понятную подачу материала. СПАСИБО!!!
це було в відео
Очень крутой сборщик! Женёк, как всегда всё на высшем уровне!!!
Создав репозиторий по твоему видео, столько нового узнал, тебе огромное спасибо за работу))) Единственное что беспокоит
Ёмаё, 3 дня мучился со сборкой, но зато теперь не буду тратить миллион времени при вёрстке!!! Спасибо тебе огромное, Фрилансер!
привет, очень сильно нужна твоя помощь, на 1:22:08 он перепрыгивает и часть кода теряется, хз что там писать
я почти ровно месяц на это потратил)
@@user-lr7yl3fj2u такая же беда🤣🤣
Жека! Ты просто Бог верстки!
Всем новичкам, прежде чем устанавливать gulp (как я пытался сделать в прошлом году), советую сначала освоить азы JS - станет НАМНОГО понятнее работать с галпом.
Спасибо тебе добрый человек что сказал об этом, потратил лишь 1,5 часа на видео ))) Пойду осваивать основы JS для начала !
Спасибо за огромный труд при создании этого видео. Сборка супер.
Спасибо за проделанную колоссальную работу! Пока смотрела видео посылала лучи добра вам))) Всё грамотно, кратко, по делу. Сборку собрала, всё работает!
Очень круто! Сделайте такое же только с Webpack!!
Привет Жека, сделай пожалуйста подробный курс по Webpack'у 🥺😀! PS Лайк поставил, а пока смотрю гайд по галп)
Спасибо за видео! Как раз с GULPом разбираюсь. Очень актуально!
Весь день делал, только шрифты было лень писать но скоро и их доделаю. Очень круто, спасибо!
Сороковая минута видео, башка сейчас взорвется! Как это запомнит и понять?)) Но в любом случае спасибо за очередное крутое видео! Будем как-то учиться делать так же как и ты без посторонней помощи :)
Спасибо, Женя! 😊
Женя, огромное спасибо!!! Надеюсь с Вами все в порядке. Это нереально крутое подробное видео! Для новичка в Gulp - это настоящий клад, подробно объясняете!
Феноменальная работа! Я, считай, только вливаюсь в более серьезный фронтэнд и, найдя это видео, сижу, восхищаясь и с поражением от всей этой красоты.
Огромное спасибо тебе за твои сборки gulp.
Я до сегодняшнего дня пользовался твоей старой сборкой и она была великолепна но вот gulp-2022 это просто вылизанный до идеала gulp.
Спасибо тебе огромное, с меня лайк комментарий и благодарность в виде патрона )
Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?
@@user-mn1so6hs8z я фигею все благодарят автора за бесплатную инфу и обучение ..но никто не берет с него пример ..смотрю никто не отвечает на твои вопросы ..какие же жадные люди.я тоже начинающий ..никто не откликается когда надо)))а Жека достойный чел.
С института я запомнил лишь одну вещь:
- инженер должен быть ленивым, но не в прямом смысле, он должен так оптимизировать процесс, чтобы затрачивать на его исполнение минимум времени и усилий.
Вот об этом gulp
Женя, ти красень, збірка супер, по відео все зробив і абсолютно все працює!!!
Дякую тобі за твої навчальні відео, я початківець, вже працюю на першій роботі і постійно піддивляюсь у тебе, хочу піти на фріланс, але поки страшнувато що не вистачить досвіду, коли вийду на нормальний прибуток обов'язково підпишусь на твій патреон.
Лучшее видео по Gulp! Огромное спасибо!❤
Очень сложно ) нужно Js учить, без него смотрю как баран на новые ворота на все что происходит 😅
Спасибо большое за контент, вернусь скоро с бОльшим пониманием происходящего. 😀
Баги:
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.
Спасибо. А не подскажешь как перенастроить на sass, а не scss?
Спасибо, помог с @img долго голову ломал
Огромное человеческое спасибо!)
у першому типу так?
.pipe(sass(
app.plugins.replace(/@img\//g, '../img/')
))
@@MykolaTakshyn Вообще не понял что ты написал. Мы по порядку применяем метод .pipe с разными параметрами. Тебе нужно поменять порядок этих пайпов, чтобы пути заменялись в sass файлах.
Замечательная сборка. Благодаря Вам научилась работать с Gulp и препроцессорами. Спасибо😌
Ща буду делать.Будет как всегда наверное Ракета,бомба,петарррдааа!!:) как раз каникулы в институте,хоть отдохну от немецкой речи и java курса
Спасибо большое, мега полезно)) Маленькое замечание - если таск svgSprite не включить в mainTasks, то в режиме дев придется постоянно его отдельно запускать, т.к. при запуске в деве мы ресетим dist и в т.ч. очищаем ранее созданный спрайт
Спасибо за комментарий! Я как раз не мог понять, почему спрайт в деве не собирается)
И как это исправить? Неудобно работать, каждый раз, когда удаляются svg файлы(
@@sailoks8411 Здравствуйте, если Ваш вопрос актуален, то вот так. Все задачи после reset.
const dev = gulp.series(reset, sprite, mainTasks, gulp.parallel(watcher, server))
@@itKotya выдаёт ошибку при такой записи. делала как по видео. в watcher спрайта нету, а в галпфайле есть только експорт svgSprite
подскажите, пожалуйста, как включить svgSprite в mainTasks?
Ура, вернулся! А то я расстроиться уже успел)
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Шикарный урок! Так давно хотел освоить данный инструмент, а здесь разобрался за 2 часа и уловил всю самую суть. Собрал уже под свой проект, вот такое БОЛЬШОЕ СПАСИБО!
у меня выдает ошибки при сборке nmp i:
44 vulnerabilities (2 low, 15 moderate, 23 high, 4 critical)
У Вас нет такого?
@@JVSd-SG нет. Будьте внимательны при импорте модулей. У меня однажды IDE незаметно для меня автоматически подставила импорт модуля, из-за чего пришлось поломать голову, что же произошло. Сейчас установил много чего и работает прекрасно
Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен
@@user-ub7st9lv6j в основном файле css импортируешь сторонние файлы @import url("путь до файла")
Просто на заметку: необязательно устанавливать webpack в качестве дополнительной зависимости, т.к. webpack уже входит в сам webpack-stream ("it is unnecessary to install webpack separately as it is a direct dependency of webpack-stream")
Жека привет!!! Посмотрел видео про новую сборку gulp и в видео ты затронул Webpack. Я обучался и собирал gulp по твоим урокам, после сборки конечно же начал тренироваться по созданию сайтов и вот тут я столкнулся со множеством проблем, приходилось лечить какие та ошибки которые вообще не должны возникать и почитав про gulp я узнал следующие, крайний раз в него обновления заносили 2 года назад, а по меркам разработки это просто вечность. Ну и как самостоятельная единица он очень проигрывает Webpack. Сейчас я только столкнулся с Webpack и только изучаю его и это очень не просто, у меня два вопроса:
1. Пользуешься ли ты сам Webpack при разработке?
2. И если да, то стоит ли ожидать видео настройки Webpack и о работе с ним?
Цікаво що за проблеми Вас торкнули.
Гадаю що Євгеній не буде робити курс по Webpack так як він професіонал в верстці сайтів і Gulp це чудовий інструмент який допомагає в верстці, просто дуже і дуже добре робить свою роботу.
Webpack теж класний і потужний інструмент, але не для верстання. Так, в нього є доповнення які теж можуть збирати верстку, але це допоміжні інструменти - Webpack не для цього, це інший інструмент.
gulp и webpack - это разные инструменты для разных целей. Как бы глупо их сравнивать.
webpack використовується під капотом в gulp це поперше, по друге хто сказав що за допомогою webpack не збираються сайти? Ще й як збираються, на сьогодні він номер один, а gulp помаленьку відходить.
Добрый день! Большое спасибо, Евгений за крутую сборку и подробные обьяснения! Успехов!
Дуже круте та корисне відео! Женя дякую за контент! Потратив два дні на те щоб написати усе ручками і вважаю що не даремно. Багато чого відкрилось по новому, багато чого зрозумів як працює із середини. Дякую!!!
Видео очень классное во всех отношениях: содержание, подача, информативность... Но у меня есть несколько вопросов. 1. почему для задания путей не использовать тот же path из nodejs? Например так, path.join(__dirname, "src", "img"). Не видел такого ни в одном видео. 2. пробовал применять сборку на проекте с большим количеством картинок. Картинки копируются не все. Как правило копируются те, чье разрешение указано первым в списке разрешений. Как это победить? 3. Почему надо подключать более оптимизированный код в файл подключения шрифтов, ведь в конце концов этот файл тоже будет обработан в дальнейшем плагином и должен быть приведен к минифицированному виду, а править такой код если что сложнее?
Не сочтите за придирки или зазнайство, просто мне интересно знать, возможно я чего-то не знаю или не понимаю.
P.S.
Оптимизированный вариант у меня сработал, а просто текст нет.
когда описывал путь, добавил пробелы после запятой, разделяющей расширения... это и стало причиной неправильной работы gulp
Женю, щиро Вам дякую за неймовірні зусилля!!!
Видео высочайшего класса! Спасибо огромное! Исчерпывающее руководство. Просто закрыли тему полностью.
Что сказать, крутой парень! Я вообще не любитель комментариев, но тут, как говорится, не удержался))) Спасибо Вам Евгений, все очень интересно и профессионально. Красавчик!!!
Хорошо, а как быть, когда уже готовые шрифты в woff и woff2? Не формируется файл fonts.scss.Что делать?
После того как выполнили команду npm i и установили последнюю версию пакета del, откатываемся до рабочей версии командой npm install del@6. а затем в файле reset.js удаляем все и пишем
import del from 'del';
export const reset = () => {
return del(app.path.clean);
};
спасибо братан ты лучший!
красава, пофиксил проблему с помощью твоей подсказки !
Спасибо!!
@@shandies1 не за что)
А зачем отказыватся? Не проще ли импорт переписать? Там ведь только asynh нужно добавить в имя.
Большое спасибо за видео! Крайне полезно! Выше всех похвал!
Жека, ты невероятен! спасибо тебе от всей души. Желаю миллионов просмотров и преданных платежеспособных патронов. Ну, а я в обойме.
Жека подскажи почему при установке gulp, все устанавливается нормально кроме webp, что в html, что в scss, что в js и т.д, остальное все работает корректно. Голову сломал.🙏
У кого будет создаваться околесица из шрифтов после написания: вам нужно установить не gulp-fonter, а gulp-fonter-fix, о чем Евгений тактично умолчал
большая благодарность
спасибо! не конвертировалось в формат woff, теперь все отлично работает
Может подскажите, к как реализовать в gulp иконочный шрифт?
Спасибо
привет, если не сложно мог бы скинуть код из файла со шрифтами, а то вроде все так же как и на видео, но не работает
Спасибо за интересную и актуальную информацию.
Очень хороший канал.
Шикарный полезный урок. Ушла неделя+
нарешті я його дожала😝 3 дні над ним мучилась, потім підписалась на патрон і скачала😝 пройшла знову відео інструкцію і радуюсь🎉 висновок: ставайте патронами❤
А что значит в режиме разработчика и продакшена?
Спасибо большое, Жека! Сегодня обновил свою сборку. За включение в сборку плагина конвертации шрифтов в woff/woff2 отдельное спасибо ;)
Ух ты! Отлично! То что мне сейчас и нужно! Спасибо, Жека!
может кто-то столкнулся с проблемой path-autocomplete: 1. не предлагает путь к файлам @img/ (но в итоге работает и все конвертирует) 2. начало дублировать файлы когда просто выбираешь путь например ./ (других плагинов вроде не нашел чтоб был конфликт, может как-то стандартные функции отключить можно чтоб не дублировало?)
Давай еще урок по Webpack)
Ок
Спасибо огромное за сборку, проделали колоссальную работу, всё отлично работает! Убил на это несколько дней, но оно того стоило😂
(Не прописывайте npm audit fix - может поломать проект)
Ой ой ой! Ще не глянув попередній а тут вже 🔥🔥🔥!!! Подякував, Женя!
Про импорт других плагинов в частности Swiper, как-то вскользь и это не работает, потому как нужно импортировать еще css, но это вызывает ошибку, gulp виснет, хотелось бы урок по импортирование различных библиотек, плагинов, фреймворков. Спасибо за урок.
Я наверное единственный такой слепой что не нашел код js для настройки webp :(
Но все остальное топ, спасибо)
Вау, Галп просто супер, як я раніше без нього жив ) Велике дякую, Жека. Вітаю з Новим Роком!!!
Спасибо, Женя, огромное! Прошел всего день и еще чуть-чуть, и сборка готова и работает. Сама я бы не справилась с этим. Самое веселое, конечно, отлавливать ошибки) Осталось разобраться с миксинами и этим пагом😬, и всё, я в полном вооружении для вёрстки😎
Новичкам совет, читайте доку. Возможно, на момент выхода ролика в плагине gulp-file-include, этого не было, но теперь есть @@webRoot, и теперь не надо заморачиваться с gulp-replace, дабы пути к файлам реплейсить
а там в пути остаётся точка, с ней можно что нибудь сделать?
Ассаламу алейкум брат, Уважаю тебя) огромное спасибо за твой труд и за годный контент
Спасибо за прекрасную подачу материала! Только для Мака notify пришлось самой настраивать. Хороший плагин.
у кого проблема с чисткой файла,попробуйте заменить установку npm install -D del на npm install del@6,у меня помогло
Спасибо
Жека будут уроки про react js ?
если будет интерес зрителей
@@FreelancerLifeStyle давай хоть один урок посмотрим, думаю будет интересно для других react очень нужен для фронтендщиков
Спасибо за качественную сборку! Как раз искал подобное руководство :)
извините, у вас всё полностью получилось ??
@@AmerAmer-lt2gz Всё что описывалось в гайде, получилось. Плюс прикрутил генерацию вафиконок и файл-манифеста. А генерацию woff(2) шрифтов и минификацию картинок (дополнительно использовал tiny png) вынес в отдельный сценарий npm run prepare
Дякую Євген за ваші відео, мені, як новачку, тонна інформації стала в пригоді!
Огромное спасибо Евгению! До видео пыталась самостоятельно разобраться с Gulp и сделать сборку, изучила кучу информации. Не вышло) Приступила к видео и делала сборку 4 дня))) Готовую сборку с патреона не использовала, хотела разобраться сама. На разных этапах были ошибки, и с css, и со шрифтами, и до последнего не отображались изображения. Что-то пришлось гуглить, на что-то нашла ответ в комментариях. !!! Для тех, кто сомневается - на 7 сентября 2022г. вся сборка и все плагины рабочие.
а с установкой gulp-svg-sprite не было проблем? Я тоже все собрала, кроме спрайтов.
@@user-ki8ij8xi9c нет, со sprite не было проблем
Дарья, у вас конвертация из otf в ttf корректно происходит? У меня почему-то otf-файлы как шрифтовые не распознаются
Здравствуйте. Столкнулась с такой проблемой. При первом запуске gulp сборка вроде бы проходит хорошо, но папочка dist не создается автоматически. В чем может быть проблема? Если четко следовала шагам по видео и ошибок или различий никаких не нашла.
думаю, надо сначала npm run svgSprive, потом npm run dev