Для тех у кого не работает плагин del на новой версии, вставляем это в reset: import {deleteAsync} from "del" export const reset = () => { return deleteAsync(['dist']) }
господи боже, я 4 дня разбирался с этой ошибкой и наконец-то нашлось решение, ОГРОМНОЕ ТЕБЕ СПАСИБО. Но там у тебя ошибка вроде незначительная. У меня вот так заработало import { deleteAsync } from "del" export const del = () => { return deleteAsync(['dist']) }
Жека привет а считаю наоборот канал не пострадает ,а ты просто красавчик признаешь свои ошибки и так заботишься о своей аудитории !!!!!!! Спасибо Тебе и Всего Наилучшего !!!!!
Всё чётко всё прекрасно, одна небольшая ремарочка при создании плагина versionNumber я заметил, что на видео упущен момент о том что плагин versionNumber нужно добавит в терминал npm i -D gulp-version-number так как если этого не сделать то в папке gulp {} version.json создаваться не будет. Короче мало ли вдруг кому пригодится этот комент! Автору очередной огромный RESPECT!!! за грамотную и понятную подачу материала. СПАСИБО!!!
Жека, это мощща! Вопросы, которые накапливались исчезли при просмотре видоса. Сборка агонь! Спасибо за твои труды. И за то, что ты ленивый и оптимизацию такую делаешь)))
отличное видео, отличный канал, отличный и харизматичный учитель!!! спасибо огромное за труд!!!! с наступающим новым годом!!! от души желаю вам успехов в развитии канала и всего только самого наилучшего по жизни))))))....спасибо огромнейшие, от души спасибо!!!!
Чел хорош. Не, серьёзно. Как препод точно. У тебя талант к обучению. Не зря набираешь новую группу, хотя говорил, что один только курс проведешь) Видать затянуло. У тебя рил получается. Один из лучших по подаче.
В пятый раз возвращаюсь к этому видео. Испробовала несколько разных сборок, потому что не получилось первые 4 раза сделать эту. Наконец все вышло, и даже работает! Спасибо большое!
Жека! Ты просто Бог верстки! Всем новичкам, прежде чем устанавливать gulp (как я пытался сделать в прошлом году), советую сначала освоить азы JS - станет НАМНОГО понятнее работать с галпом.
В прошлом видео обнаружилась ошибка (неточность в установке галпа глобально), решил перезалить. Лучше пусть пострадает канал чем ваши знания! 💪 🔴 Карта канала: 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
БОЛЬШОЕ СПАСИБО за это очень полезное видео!!!! Делал все вслед за автором. Получилась очень удобная сборка!!! Единственное внес 2 небольших изменения (опишу вдруг кому-то тоже так будет удобнее): 1. По шрифтам: В отдельную команду convertFonts вынес конвертацию шрифтов (OTF -> TTF; TTF -> WOFF и WOFF2) с записью получившихся WOFF и WOFF2 в папку src/fonts и создание файла src/scss/font.scss. А в основную сборку добавил копирование файлов WOFF и WOFF2 в папку dist/fonts. 2. В архив решил записывать все содержимое папки проекта (разумеется без модулей и папки dist) и сохранять его в папке dist/archive. После переноса всего содержимого папки dist на сервер, на сервере сохранится и архив проекта. А значит чтобы не случилось, я как разработчик всегда смогу его от туда достать, развернуть у себя на компе и внести необходимые доработки. Надеюсь, что мои мысли оказались кому-то полезны )) И Еще раз ОГРОМНОЕ СПАСИБО ЖЕНЕ ЗА ЭТО ВИДЕО!!!!
Автору огромное спасибо, я только начал учиться и решил с подключения gulp допустил такие ошибки не повторяйте за мной: 1. В import не ставить шаблонные кавычки, только простые(долго не понимал что от меня хотят) 2. появильсь проблеми с плагином del, исправил только установил версию 6.0 ( npm i -D del@6.0.0) пс: буду дополнять по мере прохождения урока)
Огромное спасибо Евгению! До видео пыталась самостоятельно разобраться с Gulp и сделать сборку, изучила кучу информации. Не вышло) Приступила к видео и делала сборку 4 дня))) Готовую сборку с патреона не использовала, хотела разобраться сама. На разных этапах были ошибки, и с css, и со шрифтами, и до последнего не отображались изображения. Что-то пришлось гуглить, на что-то нашла ответ в комментариях. !!! Для тех, кто сомневается - на 7 сентября 2022г. вся сборка и все плагины рабочие.
Народ, у кого возникают проблемы при конвертировании шрифтов .otf, а именно если у вас gulp почему-то выкидывает их в директорию root, то есть решение. Вместо плагина 'gulp-fonter' установите плагин 'gulp-fonter-unx' и импортируйте его в задаче fonts.js Насколько я понял, эта проблема только на маках. Женя, респект за видео! import fs from 'fs'; import fonter from 'gulp-fonter-unx'; import ttf2woff2 from 'gulp-ttf2woff2';
Отличная сборка. Автору огромное спасибо за такой качественный урок. Всё коротко и чётка расставлено по полочке. Немножко жалко что дальнейшие уроки мне не понять. Но всё равно огромное спасибо. Привет из Узбекистана. 👋👋👋
С института я запомнил лишь одну вещь: - инженер должен быть ленивым, но не в прямом смысле, он должен так оптимизировать процесс, чтобы затрачивать на его исполнение минимум времени и усилий. Вот об этом gulp
Огромное спасибо. До этого юзал сборку с предыдущего видео про GULP и сталкивался с некоторыми проблемами, которые решились тут. Спасибо Жека, что не стоишь на месте и развиваешься и даешь возможность развиваться остальным вместе с тобой!
Очень круто! Спасибо за обновленное видео, т.к. по старому было много нюансов, из-за которых галп отказывался корректно работать. Надеюсь, с этой версией все будет в порядке)
Баги: 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.
@@MykolaTakshyn Вообще не понял что ты написал. Мы по порядку применяем метод .pipe с разными параметрами. Тебе нужно поменять порядок этих пайпов, чтобы пути заменялись в sass файлах.
Ууух, спасибо большое за обновленное видео!!! Я только закончила сборку по старому видео, как на следующий день вышло это. Ну и жаркая у меня была неделька, но все работает на отлично! Спасибо, еще раз!!!
это прям то что нужно, супер 👍👍👍 *27.07.2023 изменения в коде:* задача удаление файлов - изменение в файле reset.js: import { deleteAsync } from "del"; export const reset = () => { return deleteAsync(app.path.clean); };
Спасибо большое, мега полезно)) Маленькое замечание - если таск svgSprite не включить в mainTasks, то в режиме дев придется постоянно его отдельно запускать, т.к. при запуске в деве мы ресетим dist и в т.ч. очищаем ранее созданный спрайт
@@sailoks8411 Здравствуйте, если Ваш вопрос актуален, то вот так. Все задачи после reset. const dev = gulp.series(reset, sprite, mainTasks, gulp.parallel(watcher, server))
Если у кого-то не попадают png в проект или они не преобразуются в webp, проверьте чтобы в правиле, где перечисляются расширения картинок ОТСУТСТВОВАЛИ ПРОБЕЛЫ после запятой, иначе, будут скопирован или преобразован ТОЛЬКО ПЕРВЫЙ тип расширения, а остальные будут ПРОИГНОРИРОВАНЫ. Евгений, заметил такую неточность. Если в проекте есть шрифты в формате woff или woff2 (именно они существовали, до преобразования из otf или ttf), то они не попадают в папку dist/fonts, а также не создается с ними файл fonts.scss. На этапе копирования папок, можно задать, чтобы они сразу (woff и woff2) копировались в dist/fonts. P.S. Евгений, спасибо тебе огромное! Супер полезное видео!!!
Можешь помочь, пожалуйста? Откуда брать продолжение в функции конвертации шрифтов fs.append(fontsFile, `@font-face { \tfont-family: ${fontName}; \tfont-display: swap; \tsrc: url("../fonts/${font}")}`, а дальше не видно
Что сказать, крутой парень! Я вообще не любитель комментариев, но тут, как говорится, не удержался))) Спасибо Вам Евгений, все очень интересно и профессионально. Красавчик!!!
Очень сложно ) нужно Js учить, без него смотрю как баран на новые ворота на все что происходит 😅 Спасибо большое за контент, вернусь скоро с бОльшим пониманием происходящего. 😀
После того как выполнили команду npm i и установили последнюю версию пакета del, откатываемся до рабочей версии командой npm install del@6. а затем в файле reset.js удаляем все и пишем import del from 'del'; export const reset = () => { return del(app.path.clean); };
У кого проблема с битыми изображениями в папке dist/img в последних версиях галпа, добавьте запрет на кодировку в файле images.js, строка return app.gulp.src(app.path.src.images, { encoding: false })
также если у вас битые картинки выходят, то мне помогло поменять порядок вызова в задаче сначала пайпим imagemin потом webp, а до этого только webp работали, а обычные картинки даже без оптимизации выходи битыми. ( "gulp": "^5.0.0", "gulp-imagemin": "^9.1.0", "gulp-webp": "^5.0.0", node-v20.15.1-x64)
Женя, ти красень, збірка супер, по відео все зробив і абсолютно все працює!!! Дякую тобі за твої навчальні відео, я початківець, вже працюю на першій роботі і постійно піддивляюсь у тебе, хочу піти на фріланс, але поки страшнувато що не вистачить досвіду, коли вийду на нормальний прибуток обов'язково підпишусь на твій патреон.
Новичкам совет, читайте доку. Возможно, на момент выхода ролика в плагине gulp-file-include, этого не было, но теперь есть @@webRoot, и теперь не надо заморачиваться с gulp-replace, дабы пути к файлам реплейсить
Сороковая минута видео, башка сейчас взорвется! Как это запомнит и понять?)) Но в любом случае спасибо за очередное крутое видео! Будем как-то учиться делать так же как и ты без посторонней помощи :)
Единственный момент который мне не подошел в этой сборке это то что функция reset была включена в общий сценарий, из за этого у меня не сохранялась скрол позиция при изменении HTML файлов и мне всё время при их обновлении приходилось прокачивать колесом свой палец )))). В общем я вынес reset из общего сценария и стал запускать отдельно: const order = gulp.series(reset, mainTasks) . Теперь скрол позиция сохраняется даже при изменении HTML файла (она остается на том же блоке что и была). А порядок в файлах можно навести одной отдельной командой npm run reset. Жене отдельное спасибо за сборку, как всегда на высоте !!!
Большое спасибо!! Очень подробно, очень полезно, просто пушка!!!)) С большим интересом смотрел этот видос и буду смотреть остальные!! Всем рекомендую!!
нарешті я його дожала😝 3 дні над ним мучилась, потім підписалась на патрон і скачала😝 пройшла знову відео інструкцію і радуюсь🎉 висновок: ставайте патронами❤
Огромное спасибо тебе за твои сборки gulp. Я до сегодняшнего дня пользовался твоей старой сборкой и она была великолепна но вот gulp-2022 это просто вылизанный до идеала gulp. Спасибо тебе огромное, с меня лайк комментарий и благодарность в виде патрона )
@@ВИЛЬКА-о8ы я фигею все благодарят автора за бесплатную инфу и обучение ..но никто не берет с него пример ..смотрю никто не отвечает на твои вопросы ..какие же жадные люди.я тоже начинающий ..никто не откликается когда надо)))а Жека достойный чел.
Я думал что со мной не так, и почему у меня конвертация шрифтов занимает две минуты. Посмотрел размер файла со шрифтом. 8мб) Все встало на свои места. Спасибо за подробный урок!
Просто на заметку: необязательно устанавливать webpack в качестве дополнительной зависимости, т.к. webpack уже входит в сам webpack-stream ("it is unnecessary to install webpack separately as it is a direct dependency of webpack-stream")
Видео очень классное во всех отношениях: содержание, подача, информативность... Но у меня есть несколько вопросов. 1. почему для задания путей не использовать тот же path из nodejs? Например так, path.join(__dirname, "src", "img"). Не видел такого ни в одном видео. 2. пробовал применять сборку на проекте с большим количеством картинок. Картинки копируются не все. Как правило копируются те, чье разрешение указано первым в списке разрешений. Как это победить? 3. Почему надо подключать более оптимизированный код в файл подключения шрифтов, ведь в конце концов этот файл тоже будет обработан в дальнейшем плагином и должен быть приведен к минифицированному виду, а править такой код если что сложнее? Не сочтите за придирки или зазнайство, просто мне интересно знать, возможно я чего-то не знаю или не понимаю. P.S. Оптимизированный вариант у меня сработал, а просто текст нет. когда описывал путь, добавил пробелы после запятой, разделяющей расширения... это и стало причиной неправильной работы gulp
Дуже круте та корисне відео! Женя дякую за контент! Потратив два дні на те щоб написати усе ручками і вважаю що не даремно. Багато чого відкрилось по новому, багато чого зрозумів як працює із середини. Дякую!!!
@@neksten477 Здравствуйте! Да, решил, по моему проблема была в путях. Сейчас уже не вспомню. Помогло 2 раза повторить за автором, и тогда я понял все это намного лучше ))
Жека привет!!! Посмотрел видео про новую сборку gulp и в видео ты затронул Webpack. Я обучался и собирал gulp по твоим урокам, после сборки конечно же начал тренироваться по созданию сайтов и вот тут я столкнулся со множеством проблем, приходилось лечить какие та ошибки которые вообще не должны возникать и почитав про gulp я узнал следующие, крайний раз в него обновления заносили 2 года назад, а по меркам разработки это просто вечность. Ну и как самостоятельная единица он очень проигрывает Webpack. Сейчас я только столкнулся с Webpack и только изучаю его и это очень не просто, у меня два вопроса: 1. Пользуешься ли ты сам Webpack при разработке? 2. И если да, то стоит ли ожидать видео настройки Webpack и о работе с ним?
Цікаво що за проблеми Вас торкнули. Гадаю що Євгеній не буде робити курс по Webpack так як він професіонал в верстці сайтів і Gulp це чудовий інструмент який допомагає в верстці, просто дуже і дуже добре робить свою роботу. Webpack теж класний і потужний інструмент, але не для верстання. Так, в нього є доповнення які теж можуть збирати верстку, але це допоміжні інструменти - Webpack не для цього, це інший інструмент.
webpack використовується під капотом в gulp це поперше, по друге хто сказав що за допомогою webpack не збираються сайти? Ще й як збираються, на сьогодні він номер один, а gulp помаленьку відходить.
можно не писать ключ и значения, можно сразу писать только ключа, а значения само будет, таким как ключ { replace: replace, plumber: plumber } { replace, plumber }
JS-функция определения поддержки WebP, которая написана в описании, добавляет классы к тегу body а не к html как сказано в видео, из-за этого webp картинки не отображались при попытке запихнуть их в background... чуть всю сборку не начал переделывать заново
Если проблеммы с 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';"
$ gulp `import sass from 'sass'` is deprecated. Please use `import * as sass from 'sass'` instead. У меня такое сообщение, меняю первую строку на ту,что у Вас в комментарии и все равно не работает, такую выдает Error: Invalid glob argument: undefined, не подскажите в чем проблема?
может кто-то столкнулся с проблемой path-autocomplete: 1. не предлагает путь к файлам @img/ (но в итоге работает и все конвертирует) 2. начало дублировать файлы когда просто выбираешь путь например ./ (других плагинов вроде не нашел чтоб был конфликт, может как-то стандартные функции отключить можно чтоб не дублировало?)
Великолепное видео, спасибо! Если у вас не обновляется страница при изменении SCSS файла, я нашел следующее решение. Нужно удалить плагин browser-sync и установить более старую версию. "npm uninstall browser-sync" и потом "npm i -D browser-sync@2.21.0".
Про импорт других плагинов в частности Swiper, как-то вскользь и это не работает, потому как нужно импортировать еще css, но это вызывает ошибку, gulp виснет, хотелось бы урок по импортирование различных библиотек, плагинов, фреймворков. Спасибо за урок.
возможно, для человека который уже знает и использует галп данное видео выступит в роли справочника, что улучшить, какие модули можно использовать, но для меня как для новичка копи/паст(возникающие мгновенно строки) откуда и куда, зачем, очень трудны для восприятия. в основном спасибо, но вот так чтобы после просмотра самому все это написать - фиг там. просто скачать готовый каркас и спасибо ). пойду поищу может кто объяснит подробней
Жека подскажи почему при установке gulp, все устанавливается нормально кроме webp, что в html, что в scss, что в js и т.д, остальное все работает корректно. Голову сломал.🙏
Привет Женя, когда я зашел к тебе на канал, я был 0 в верстке, сегодня в взял 4й заказ на фрилансе благодаря тебе, спасибо большое!!!!!!!!!! Слава Україні)
Здравствуйте! Есть проблема написании сборки в моменте подключения fileInclude, не рендерится файл html, не могу ничего поделать. Пакет установлен верный, уже проверял. Код дословно переписан уже в третий раз, но увы желаемого результата так и не получил. Если у вас будет время, могли бы вы пожалуйста помочь разобраться?
Для тех у кого не работает плагин 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'])
}
Спасибо, помогло
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 нет проблем!
дай бог тебе здоровья, спасибо
Это канал на вес золота. Топ контент. Надо приложиться все усилия чтоб количество подписчиков выросло до 15 млн
Блин вот это уровень. К этому нужно стремиться. Мне чтобы осознано всё это настроить, понимать и перестраивать еще очень далеко
Жека привет а считаю наоборот канал не пострадает ,а ты просто красавчик признаешь свои ошибки и так заботишься о своей аудитории !!!!!!! Спасибо Тебе и Всего Наилучшего !!!!!
Привет Жека, сделай пожалуйста подробный курс по Webpack'у 🥺😀! PS Лайк поставил, а пока смотрю гайд по галп)
Всё чётко всё прекрасно, одна небольшая ремарочка при создании плагина versionNumber я заметил, что на видео упущен момент о том что плагин versionNumber нужно добавит в терминал npm i -D gulp-version-number так как если этого не сделать то в папке gulp {} version.json создаваться не будет. Короче мало ли вдруг кому пригодится этот комент! Автору очередной огромный RESPECT!!! за грамотную и понятную подачу материала. СПАСИБО!!!
це було в відео
Помню когда на этом канале всего лишь 7000 подписчиков. Виден колоссальный труд автора на протяжении существования канала.
Спасибо!
@@FreelancerLifeStyle Не за что. Это вам спасибо за увлекательный контент.
Жека, это мощща!
Вопросы, которые накапливались исчезли при просмотре видоса. Сборка агонь! Спасибо за твои труды. И за то, что ты ленивый и оптимизацию такую делаешь)))
отличное видео, отличный канал, отличный и харизматичный учитель!!! спасибо огромное за труд!!!! с наступающим новым годом!!! от души желаю вам успехов в развитии канала и всего только самого наилучшего по жизни))))))....спасибо огромнейшие, от души спасибо!!!!
Спасибо ОГРОМНЕЙШЕЕ за то, что ты щедро делишься с нами своими наработками))
Сама я бы это год разбирала🙃
Ураааа!!! А то я уже расстроилась, настроение испортилось. Но теперь все снова в полном порядке!!! СПАСИБО!!!!
Чел хорош. Не, серьёзно. Как препод точно. У тебя талант к обучению. Не зря набираешь новую группу, хотя говорил, что один только курс проведешь) Видать затянуло. У тебя рил получается. Один из лучших по подаче.
В пятый раз возвращаюсь к этому видео.
Испробовала несколько разных сборок, потому что не получилось первые 4 раза сделать эту.
Наконец все вышло, и даже работает! Спасибо большое!
*Позавчера начал смотреть старое видео про Gulp, не успел досмотреть, и вышло свежее видео. Это такая удача для меня! Спасибо большое, Евгений)*
Жека! Ты просто Бог верстки!
Всем новичкам, прежде чем устанавливать gulp (как я пытался сделать в прошлом году), советую сначала освоить азы JS - станет НАМНОГО понятнее работать с галпом.
Спасибо тебе добрый человек что сказал об этом, потратил лишь 1,5 часа на видео ))) Пойду осваивать основы JS для начала !
В прошлом видео обнаружилась ошибка (неточность в установке галпа глобально), решил перезалить. Лучше пусть пострадает канал чем ваши знания! 💪
🔴 Карта канала: 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
Женя, моя мечта выйти на доход и делать тебе стабильные донаты! Ты заслуживаешь большего, чем делаешь для нас!
Золотой ты человек!)
Спасибо большое
Достойный ответ ОТЛИЧНОГО Специалиста! С наступающими Праздниками!
Спасибо!
Очень сложная тема, но спасибо, что разделил видео на определённые блоки!
БОЛЬШОЕ СПАСИБО за это очень полезное видео!!!!
Делал все вслед за автором. Получилась очень удобная сборка!!!
Единственное внес 2 небольших изменения (опишу вдруг кому-то тоже так будет удобнее):
1. По шрифтам: В отдельную команду convertFonts вынес конвертацию шрифтов (OTF -> TTF; TTF -> WOFF и WOFF2) с записью получившихся WOFF и WOFF2 в папку src/fonts и создание файла src/scss/font.scss. А в основную сборку добавил копирование файлов WOFF и WOFF2 в папку dist/fonts.
2. В архив решил записывать все содержимое папки проекта (разумеется без модулей и папки dist) и сохранять его в папке dist/archive. После переноса всего содержимого папки dist на сервер, на сервере сохранится и архив проекта. А значит чтобы не случилось, я как разработчик всегда смогу его от туда достать, развернуть у себя на компе и внести необходимые доработки.
Надеюсь, что мои мысли оказались кому-то полезны ))
И Еще раз ОГРОМНОЕ СПАСИБО ЖЕНЕ ЗА ЭТО ВИДЕО!!!!
у вас не было проблемы не создает папку fonts?? сколько не мучаюсь не получаеться дела в маке чтоли
@@николайкраснов-р3о разобрался?
Феноменальная работа! Я, считай, только вливаюсь в более серьезный фронтэнд и, найдя это видео, сижу, восхищаясь и с поражением от всей этой красоты.
Ёмаё, 3 дня мучился со сборкой, но зато теперь не буду тратить миллион времени при вёрстке!!! Спасибо тебе огромное, Фрилансер!
привет, очень сильно нужна твоя помощь, на 1:22:08 он перепрыгивает и часть кода теряется, хз что там писать
я почти ровно месяц на это потратил)
@@ДимаЛевко-и6ц такая же беда🤣🤣
Сборка супер! Все получилось и работает! Главное внимательность. Евгений, большущее спасибо вам за вашу работу! Сил и процветания в дальнейшем!!!
Жека, как всегда вовремя, респект тебе и лайкос😎😉
Добрый день! Большое спасибо, Евгений за крутую сборку и подробные обьяснения! Успехов!
Автору огромное спасибо, я только начал учиться и решил с подключения gulp
допустил такие ошибки не повторяйте за мной:
1. В import не ставить шаблонные кавычки, только простые(долго не понимал что от меня хотят)
2. появильсь проблеми с плагином del, исправил только установил версию 6.0 ( npm i -D del@6.0.0)
пс: буду дополнять по мере прохождения урока)
отлично. иду дальше. благодарочка авторам.
Так сложно садиться за непонятный новый материал, но по вашим видео спустя время начинаешь всё понимать, спасибо!
Капец я исполнил. Начал собирать галп по этому видео а потом оказался на видосе 1летней давности и продолжил по нему😀😀😀
Огромное спасибо Евгению! До видео пыталась самостоятельно разобраться с Gulp и сделать сборку, изучила кучу информации. Не вышло) Приступила к видео и делала сборку 4 дня))) Готовую сборку с патреона не использовала, хотела разобраться сама. На разных этапах были ошибки, и с css, и со шрифтами, и до последнего не отображались изображения. Что-то пришлось гуглить, на что-то нашла ответ в комментариях. !!! Для тех, кто сомневается - на 7 сентября 2022г. вся сборка и все плагины рабочие.
а с установкой gulp-svg-sprite не было проблем? Я тоже все собрала, кроме спрайтов.
@@ЕленаКазакова-о1э4и нет, со sprite не было проблем
Дарья, у вас конвертация из otf в ttf корректно происходит? У меня почему-то otf-файлы как шрифтовые не распознаются
Народ, у кого возникают проблемы при конвертировании шрифтов .otf, а именно если у вас gulp почему-то выкидывает их в директорию root, то есть решение. Вместо плагина 'gulp-fonter' установите плагин 'gulp-fonter-unx' и импортируйте его в задаче fonts.js Насколько я понял, эта проблема только на маках. Женя, респект за видео!
import fs from 'fs';
import fonter from 'gulp-fonter-unx';
import ttf2woff2 from 'gulp-ttf2woff2';
У кого линукс кстати, тоже работает.
Отличная сборка. Автору огромное спасибо за такой качественный урок. Всё коротко и чётка расставлено по полочке. Немножко жалко что дальнейшие уроки мне не понять. Но всё равно огромное спасибо. Привет из Узбекистана. 👋👋👋
С института я запомнил лишь одну вещь:
- инженер должен быть ленивым, но не в прямом смысле, он должен так оптимизировать процесс, чтобы затрачивать на его исполнение минимум времени и усилий.
Вот об этом gulp
Огромное спасибо. До этого юзал сборку с предыдущего видео про GULP и сталкивался с некоторыми проблемами, которые решились тут. Спасибо Жека, что не стоишь на месте и развиваешься и даешь возможность развиваться остальным вместе с тобой!
Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?
Огромное спасибо за чёткую речь, правильные интонации и позитив. Вы рождённый Учитель. Нам повезло☺
Не подскажешь как по этой сборке подключать сторонние css файлы по типу bootstrapa? (не через cdn) буду благодарен
Дякую Євген за ваші відео, мені, як новачку, тонна інформації стала в пригоді!
Очень крутая сборка на 2022 год! Нравится, как Женя продумал оптимизацию и структуризацию. Огонь!🔥
Очень круто! Спасибо за обновленное видео, т.к. по старому было много нюансов, из-за которых галп отказывался корректно работать. Надеюсь, с этой версией все будет в порядке)
Мощная сборка получилась. Спасибо за огромную проделанную работу!
Круто. Смотрел до этого другие уроки. Здесь структурировано и показано так, что понятно как оно работает.
Женя спасибо тебе огромное за эту сборку. Сил и здоровья тебе в это непростое время
Баги:
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. Всего 4 дня готово.
это прям то что нужно, супер 👍👍👍
*27.07.2023 изменения в коде:*
задача удаление файлов - изменение в файле reset.js:
import { deleteAsync } from "del";
export const reset = () => {
return deleteAsync(app.path.clean);
};
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Спасибо большое, мега полезно)) Маленькое замечание - если таск svgSprite не включить в mainTasks, то в режиме дев придется постоянно его отдельно запускать, т.к. при запуске в деве мы ресетим dist и в т.ч. очищаем ранее созданный спрайт
Спасибо за комментарий! Я как раз не мог понять, почему спрайт в деве не собирается)
И как это исправить? Неудобно работать, каждый раз, когда удаляются svg файлы(
@@sailoks8411 Здравствуйте, если Ваш вопрос актуален, то вот так. Все задачи после reset.
const dev = gulp.series(reset, sprite, mainTasks, gulp.parallel(watcher, server))
@@etobaton выдаёт ошибку при такой записи. делала как по видео. в watcher спрайта нету, а в галпфайле есть только експорт svgSprite
подскажите, пожалуйста, как включить svgSprite в mainTasks?
Спасибо Вам огромное!!! Я благодаря Вам оооооочень многому научилась!!!
извините, у Вас всё полностью получилось??
Если у кого-то не попадают png в проект или они не преобразуются в webp, проверьте чтобы в правиле, где перечисляются расширения картинок ОТСУТСТВОВАЛИ ПРОБЕЛЫ после запятой, иначе, будут скопирован или преобразован ТОЛЬКО ПЕРВЫЙ тип расширения, а остальные будут ПРОИГНОРИРОВАНЫ.
Евгений, заметил такую неточность. Если в проекте есть шрифты в формате woff или woff2 (именно они существовали, до преобразования из otf или ttf), то они не попадают в папку dist/fonts, а также не создается с ними файл fonts.scss. На этапе копирования папок, можно задать, чтобы они сразу (woff и woff2) копировались в dist/fonts.
P.S. Евгений, спасибо тебе огромное! Супер полезное видео!!!
Можешь помочь, пожалуйста? Откуда брать продолжение в функции конвертации шрифтов fs.append(fontsFile,
`@font-face {
\tfont-family: ${fontName};
\tfont-display: swap;
\tsrc: url("../fonts/${font}")}`, а дальше не видно
@@kosmo8550 вот именно! уже 10 дней прошу людей поделиться =) но никто не хочет
@@AmerAmer-lt2gz если найду, обязательно скину)
@@kosmo8550 спасибо!
@@AmerAmer-lt2gz Вам скинулся ответ? Просто у меня как будто комментарий удаляется
Что сказать, крутой парень! Я вообще не любитель комментариев, но тут, как говорится, не удержался))) Спасибо Вам Евгений, все очень интересно и профессионально. Красавчик!!!
Ахренеть какой подробный урок, я даже удивлён. Раньше юзал галп по-мелочи, но теперь, чувствую, заживу))
Очень сложно ) нужно Js учить, без него смотрю как баран на новые ворота на все что происходит 😅
Спасибо большое за контент, вернусь скоро с бОльшим пониманием происходящего. 😀
После того как выполнили команду npm i и установили последнюю версию пакета del, откатываемся до рабочей версии командой npm install del@6. а затем в файле reset.js удаляем все и пишем
import del from 'del';
export const reset = () => {
return del(app.path.clean);
};
спасибо братан ты лучший!
красава, пофиксил проблему с помощью твоей подсказки !
Спасибо!!
@@shandies1 не за что)
А зачем отказыватся? Не проще ли импорт переписать? Там ведь только asynh нужно добавить в имя.
У кого проблема с битыми изображениями в папке dist/img в последних версиях галпа, добавьте запрет на кодировку в файле images.js, строка return app.gulp.src(app.path.src.images, { encoding: false })
помогло, благодарю сильнейше!
также если у вас битые картинки выходят, то мне помогло поменять порядок вызова в задаче сначала пайпим imagemin потом webp, а до этого только webp работали, а обычные картинки даже без оптимизации выходи битыми. ( "gulp": "^5.0.0", "gulp-imagemin": "^9.1.0", "gulp-webp": "^5.0.0", node-v20.15.1-x64)
огромное спасибо!
Огромное спасибо! 2 часа видоса воспроизводил часов 5)) впервые коснулся этой темы сборок, очень интересно
о ничего себе ! ну и терпение у тебя !
Женя, ти красень, збірка супер, по відео все зробив і абсолютно все працює!!!
Дякую тобі за твої навчальні відео, я початківець, вже працюю на першій роботі і постійно піддивляюсь у тебе, хочу піти на фріланс, але поки страшнувато що не вистачить досвіду, коли вийду на нормальний прибуток обов'язково підпишусь на твій патреон.
Очень круто! Сделайте такое же только с Webpack!!
Новичкам совет, читайте доку. Возможно, на момент выхода ролика в плагине gulp-file-include, этого не было, но теперь есть @@webRoot, и теперь не надо заморачиваться с gulp-replace, дабы пути к файлам реплейсить
а там в пути остаётся точка, с ней можно что нибудь сделать?
Сороковая минута видео, башка сейчас взорвется! Как это запомнит и понять?)) Но в любом случае спасибо за очередное крутое видео! Будем как-то учиться делать так же как и ты без посторонней помощи :)
Единственный момент который мне не подошел в этой сборке это то что функция reset была включена в общий сценарий, из за этого у меня не сохранялась скрол позиция при изменении HTML файлов и мне всё время при их обновлении приходилось прокачивать колесом свой палец )))). В общем я вынес reset из общего сценария и стал запускать отдельно:
const order = gulp.series(reset, mainTasks) .
Теперь скрол позиция сохраняется даже при изменении HTML файла (она остается на том же блоке что и была). А порядок в файлах можно навести одной отдельной командой npm run reset.
Жене отдельное спасибо за сборку, как всегда на высоте !!!
Большое спасибо!! Очень подробно, очень полезно, просто пушка!!!)) С большим интересом смотрел этот видос и буду смотреть остальные!! Всем рекомендую!!
нарешті я його дожала😝 3 дні над ним мучилась, потім підписалась на патрон і скачала😝 пройшла знову відео інструкцію і радуюсь🎉 висновок: ставайте патронами❤
Огромное спасибо тебе за твои сборки gulp.
Я до сегодняшнего дня пользовался твоей старой сборкой и она была великолепна но вот gulp-2022 это просто вылизанный до идеала gulp.
Спасибо тебе огромное, с меня лайк комментарий и благодарность в виде патрона )
Привет, если используешь bootstrap, подскажи, пожалуйста, как подключать отдельные его части в app.js ?
@@ВИЛЬКА-о8ы я фигею все благодарят автора за бесплатную инфу и обучение ..но никто не берет с него пример ..смотрю никто не отвечает на твои вопросы ..какие же жадные люди.я тоже начинающий ..никто не откликается когда надо)))а Жека достойный чел.
Ура, вернулся! А то я расстроиться уже успел)
Я думал что со мной не так, и почему у меня конвертация шрифтов занимает две минуты. Посмотрел размер файла со шрифтом. 8мб) Все встало на свои места. Спасибо за подробный урок!
Прекрасный урок, всё работает, всё понятно, красота! :)
У кого будет создаваться околесица из шрифтов после написания: вам нужно установить не gulp-fonter, а gulp-fonter-fix, о чем Евгений тактично умолчал
большая благодарность
спасибо! не конвертировалось в формат woff, теперь все отлично работает
Может подскажите, к как реализовать в gulp иконочный шрифт?
Спасибо
привет, если не сложно мог бы скинуть код из файла со шрифтами, а то вроде все так же как и на видео, но не работает
Просто на заметку: необязательно устанавливать webpack в качестве дополнительной зависимости, т.к. webpack уже входит в сам webpack-stream ("it is unnecessary to install webpack separately as it is a direct dependency of webpack-stream")
у кого проблема с чисткой файла,попробуйте заменить установку npm install -D del на npm install del@6,у меня помогло
Спасибо
Огромное спасибо за данный материал. У тебя лучшая подача информации! И спасибо всем за комментарии по поводу исправлений и прочих моментов
Весь день делал, только шрифты было лень писать но скоро и их доделаю. Очень круто, спасибо!
Видео очень классное во всех отношениях: содержание, подача, информативность... Но у меня есть несколько вопросов. 1. почему для задания путей не использовать тот же path из nodejs? Например так, path.join(__dirname, "src", "img"). Не видел такого ни в одном видео. 2. пробовал применять сборку на проекте с большим количеством картинок. Картинки копируются не все. Как правило копируются те, чье разрешение указано первым в списке разрешений. Как это победить? 3. Почему надо подключать более оптимизированный код в файл подключения шрифтов, ведь в конце концов этот файл тоже будет обработан в дальнейшем плагином и должен быть приведен к минифицированному виду, а править такой код если что сложнее?
Не сочтите за придирки или зазнайство, просто мне интересно знать, возможно я чего-то не знаю или не понимаю.
P.S.
Оптимизированный вариант у меня сработал, а просто текст нет.
когда описывал путь, добавил пробелы после запятой, разделяющей расширения... это и стало причиной неправильной работы gulp
Спасибо, Женя! 😊
Я наверное единственный такой слепой что не нашел код js для настройки webp :(
Но все остальное топ, спасибо)
Дуже круте та корисне відео! Женя дякую за контент! Потратив два дні на те щоб написати усе ручками і вважаю що не даремно. Багато чого відкрилось по новому, багато чого зрозумів як працює із середини. Дякую!!!
Вау, Галп просто супер, як я раніше без нього жив ) Велике дякую, Жека. Вітаю з Новим Роком!!!
Женю, щиро Вам дякую за неймовірні зусилля!!!
Подскажите, у кого ни будь была проблема с gulp-zip? Он отрабатывает, не выдает никаких ошибок, но архив не появляется (((
Добрый день, нашли решение?
@@neksten477 Здравствуйте! Да, решил, по моему проблема была в путях. Сейчас уже не вспомню. Помогло 2 раза повторить за автором, и тогда я понял все это намного лучше ))
Давай еще урок по Webpack)
Ок
Лучшее видео по Gulp! Огромное спасибо!❤
Ща буду делать.Будет как всегда наверное Ракета,бомба,петарррдааа!!:) как раз каникулы в институте,хоть отдохну от немецкой речи и java курса
Хорошо, а как быть, когда уже готовые шрифты в woff и woff2? Не формируется файл fonts.scss.Что делать?
Жека привет!!! Посмотрел видео про новую сборку gulp и в видео ты затронул Webpack. Я обучался и собирал gulp по твоим урокам, после сборки конечно же начал тренироваться по созданию сайтов и вот тут я столкнулся со множеством проблем, приходилось лечить какие та ошибки которые вообще не должны возникать и почитав про gulp я узнал следующие, крайний раз в него обновления заносили 2 года назад, а по меркам разработки это просто вечность. Ну и как самостоятельная единица он очень проигрывает Webpack. Сейчас я только столкнулся с Webpack и только изучаю его и это очень не просто, у меня два вопроса:
1. Пользуешься ли ты сам Webpack при разработке?
2. И если да, то стоит ли ожидать видео настройки Webpack и о работе с ним?
Цікаво що за проблеми Вас торкнули.
Гадаю що Євгеній не буде робити курс по Webpack так як він професіонал в верстці сайтів і Gulp це чудовий інструмент який допомагає в верстці, просто дуже і дуже добре робить свою роботу.
Webpack теж класний і потужний інструмент, але не для верстання. Так, в нього є доповнення які теж можуть збирати верстку, але це допоміжні інструменти - Webpack не для цього, це інший інструмент.
gulp и webpack - это разные инструменты для разных целей. Как бы глупо их сравнивать.
webpack використовується під капотом в gulp це поперше, по друге хто сказав що за допомогою webpack не збираються сайти? Ще й як збираються, на сьогодні він номер один, а gulp помаленьку відходить.
можно не писать ключ и значения, можно сразу писать только ключа, а значения само будет, таким как ключ
{
replace: replace,
plumber: plumber
}
{
replace,
plumber
}
можно но так наглядней
Какой знающий мужик. Он, наверное, миллионер, с такими-то скиллами. Круто.
Чудовий матеріал! Дуже дякую, Євгене, за таку плідну працю!
JS-функция определения поддержки WebP, которая написана в описании, добавляет классы к тегу body а не к html как сказано в видео, из-за этого webp картинки не отображались при попытке запихнуть их в background... чуть всю сборку не начал переделывать заново
к стати, заметил, то же самое. Разница ясна. если писать код который есть в описании - даёт на body, а вот если в живую по видео катать - даёт на html
у меня тоже проблема с добавлением класа no-webp. в safari и IE не отображается background.
Ребята , может кто то в курсе почему у меня не подгружаются jpg? А вот svg норм подключаются
У меня не конвертируются картинки из jpg в webp, пишу как в видео. В курсе как решить?
Если проблеммы с 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';"
спасибі допомогло)
$ gulp
`import sass from 'sass'` is deprecated.
Please use `import * as sass from 'sass'` instead.
У меня такое сообщение, меняю первую строку на ту,что у Вас в комментарии и все равно не работает, такую выдает Error: Invalid glob argument: undefined, не подскажите в чем проблема?
@@ДмитрийА-э6н
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);
может кто-то столкнулся с проблемой path-autocomplete: 1. не предлагает путь к файлам @img/ (но в итоге работает и все конвертирует) 2. начало дублировать файлы когда просто выбираешь путь например ./ (других плагинов вроде не нашел чтоб был конфликт, может как-то стандартные функции отключить можно чтоб не дублировало?)
Шикарный полезный урок. Ушла неделя+
Великолепное видео, спасибо!
Если у вас не обновляется страница при изменении SCSS файла, я нашел следующее решение. Нужно удалить плагин browser-sync и установить более старую версию. "npm uninstall browser-sync" и потом "npm i -D browser-sync@2.21.0".
Жека будут уроки про react js ?
если будет интерес зрителей
@@FreelancerLifeStyle давай хоть один урок посмотрим, думаю будет интересно для других react очень нужен для фронтендщиков
Про импорт других плагинов в частности Swiper, как-то вскользь и это не работает, потому как нужно импортировать еще css, но это вызывает ошибку, gulp виснет, хотелось бы урок по импортирование различных библиотек, плагинов, фреймворков. Спасибо за урок.
возможно, для человека который уже знает и использует галп данное видео выступит в роли справочника, что улучшить, какие модули можно использовать, но для меня как для новичка копи/паст(возникающие мгновенно строки) откуда и куда, зачем, очень трудны для восприятия. в основном спасибо, но вот так чтобы после просмотра самому все это написать - фиг там. просто скачать готовый каркас и спасибо ). пойду поищу может кто объяснит подробней
Это было не легко! Но всё заработало!
Козацького лайку тобi Фрiласер, ты кращий!!!
Суперский урок! Спасибо огромное за такой подробный и понятный урок!
Жека подскажи почему при установке gulp, все устанавливается нормально кроме webp, что в html, что в scss, что в js и т.д, остальное все работает корректно. Голову сломал.🙏
Для Mac OS вместо gulp-fonter можно использовать gulp-fonter-unx. Ну или руками править путь в оригинальном плагине.
Cпасибо большое
Спасибо Вам, добрый человек! А то я уже несколько раз перепроверила код и не могла понять почему не совпадает путь
@@elinaolsanska6551 всегда пожалуйста. Я сам пару дней в монитор медитировал, пытаясь понять что почём :-)
@@DmitryKvasnikov не знаешь? почему то не работает fonter вообще. gulp-fonter-unx тоже. прям все правильно проверил несколько раз.
@@askattaalaibekov3182 У меня на OS X все работает. Сборка - с времени моего комментария первого не менялась.
Привет Женя, когда я зашел к тебе на канал, я был 0 в верстке, сегодня в взял 4й заказ на фрилансе благодаря тебе, спасибо большое!!!!!!!!!! Слава Україні)
Делаю с Вами сборку и понимаю сколько освобождается времени )))) Спасибо!
Поставлю лайк заранее, позже гляну видос. Один из лучших каналов ИМХО
Здравствуйте! Есть проблема написании сборки в моменте подключения fileInclude, не рендерится файл html, не могу ничего поделать. Пакет установлен верный, уже проверял. Код дословно переписан уже в третий раз, но увы желаемого результата так и не получил. Если у вас будет время, могли бы вы пожалуйста помочь разобраться?
Тоже такая проблема. Завтра буду разбираться.
Добрый день,если вы разобрались, не могли бы подсказать в чем дело ?
@@Анастасия-ж4к5и Проверьте пути
@@amp3rsander да, и правда дело в моей невнимательности, спасибо большое!!!