Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!
Большое вам спасибо Юрий за ваш труд!! Определенно куплю ваши курсы в ближайшем будущем. Все четко и по делу без лишней воды и замысловатых фраз, а главное доходчиво.
Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня. Пусть никогда не иссякнет доброта и мудрость в учительском сердце!
Всем здравствия. В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp. Спасибо! Лайк, подписка.
Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.
честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!
Спасибо) Старался, сначала хотел сделать базовый вариант сборки, но потом не удержался и сделал почти ультимативный. Несмотря на то что можно еще докрутить и добавить пару плагинов - результатом более чем доволен. Ну и код конечно для подписчиков, чтобы можно было нормально пользоваться) Удачи в веб-разработке!)
@@WebCademy огромное спасибо за то что выложил исходники сборки, уже который раз она экономит время, так как по не знанию и отсутсвие опыта я порой не могу найти где я написал ошибку, даже при наличии исходника я ее не могу найти((. но вот схходлник все быстро исправляет, потому что там нет ошибки))) Спасибо огромное!
ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!
✌Спасибо за урок! Можно обойтись без if() 44:55, в консоле есть совет, использовать опцию allowEmpty. Тогда в нашем случае строка 9 будет выглядеть следующим образом return gulp.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());
Спасибо, Юрий. Большую работу проделали. Кстати, с помощью require там уже много чего не устанавливается. В документации уже по-другому. Только если версии из видео устанавливать.
@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍
Юрий, это опять я. Напишу коммент. Вдруг у кого-то возникнет такая же проблема при работе со сборкой. Хотя, возможно, просто я невнимательно смотрел видео и где-то допустил ошибки. Суть. При создании двух слайдеров swiper на странице перестала автоматически перезагружаться страница. В консоли появилась ошибка. Оставляешь какой-то один слайдер на странице, - все работает. Если запускать сайт в браузере не через сборку (просто открыв index.html), ошибки в консоли нет. До этого использовал browser-sync для автоматической перезагрузки страницы, а не gulp-server-livereload, и делал много слайдеров на swiperjs на одной странице. Никаких проблем не было. Решил откатиться к какой-то старой версии gulp-server-livereload. Но как оказалось, самой последней версии, как я понял, уже семь лет. И появилось подозрение, что откат к более старой версии вряд ли решит мою проблему. В общем, отключил gulp-server-livereload и подключил browser-sync. Проблема исчезла. Автоматическая перезагрузка страницы стала работать, ошибка в консоли исчезла. Была еще проблема с webp. Стал абсолютить картинки, делать object-fit. В папке build не оказывалось index.html. Решил просто отключить плагин. Вернусь к webp как-нибудь потом.
Спасибо Юрий, для сборки использовал всегда webpack, gulp юзал крайне редко, но посмотрев некоторые куски видео задумался... Если проект небольшой- необходимости в мощи webpack нет и gulp тут незаменим: простой, понятный и быстро конфигиться.. Видео отличное!
Спасибо! Очень полезный урок. Я много новых пакетов узнал )) Я значительно расширил свою сборку благодаря этому уроку. Хотя у меня сборка основана на pug и sass. Большое спасибо! Подписываюсь на канал, буду ждать новых отличных уроков.
Огромное спасибо за видео! Я как-то пробовал самостоятельно настроить GULP, но так как я новичок, у меня ничего не вышло. Сажусь пробовать еще раз но уже с Вашим гайдом! Желаю успехов и процветания каналу и автору!
Спасибо за комментарий!) Уверен по этому уроку у вас все получится!) Очень подробно и пошагово расписал все в видео, ну и готовый код сборки можно скачать, чтобы сверить со своим.
Если у кого на 5 версии Gulp`a картинки превращаются в битые файлы, добавляем encoding: false gulp.task('assets', function () { return gulp.src(`./src/images/**/*`, {encoding: false}) .pipe(gulp.dest(`./dist/images`)); });
У кого возникли проблемы с плагином "gulp-changed" устанавливайте версию "gulp-changed": "^4.0.3", последняя которая поддерживает require, новые только с импортами, смешивать импорты и require не получится, хоть вроде есть какие то способы, но я так и не понял как ) так что более старая версия в помощь, да если кто знает как сочетать require и импорт в одном файле буду признателен!
Здравствуйте Юрий, я сделал сборку Gulp + webpack конечно много чего я добавил. Дела даже не в этом, а в том когда я начал переделывать сборку на модуль ES6, то Javf script показал строгий режим, а при таком режим блокируется в браузере сам код JS и нужен плавен что бы его преобразовать И главное авторы которые на Ютубе показывать сборку на этом модули про плагин не слово не говорят transform-remove-strict-mode или напрямую через webpack 2. Так что я решил оставить так как есть Сделал все как у вас опять просто смысл перестраиваться это занимает время поиск решение проблемы в интернете и т.д
2:06:09 Обратите внимание, gulp-autoprefixer с версии 9.0.0 теперь поддерживает только ES Modules синтаксис импортов. Чтобы использовать его через require установите 8 версию 2:16:00 Аналогично с gulp-webp
Думаю ,автор слишком недооценил мощь фронтендеров, их ведь надо ,за ручку проводить и все разжевать.10 коммент про подключение стилей, автор, вы живы?))) (спасибо за видео, было очень приятно и полезно)
While it's true that the popularity of certain web development tools and technologies can change over time, it would be incorrect to say that Gulp is no longer relevant. Gulp has been a popular choice for many years and continues to be used in various projects. That being said, the web development ecosystem is constantly evolving, and new tools and technologies emerge to address specific needs and improve developer productivity. One such tool is Parcel, which has gained popularity in recent years. Parcel's simplicity and ease of use have attracted developers who prefer a more streamlined setup without having to configure complex build pipelines. But I would recommend looking in the direction of crooked builders and Parcel, a more promising project than Gulp
Доброе время суток. Такой вопрос: при работе с scss выдает предупреждение о устаревании @import, это как-то можно убрать или будет использовать в будущем другой метод миграции?
Кто-нибудь знает, почему не работает watch? Таск запускается, но изменения не отслеживает как на видео. Переписывала точь-в-точь, не понимаю, что не так.
@@IT-Proger8 я там нашла решение, надо в середину между путем и выбором таски добавить строчку {interval: 1000, usePolling: true} Вот таким образом: watch('./src/scss/**/*.scss', {interval: 1000, usePolling: true}, gulp.parallel('sass')); И так для всех. Там, короче, не всегда файловая система позволяет отслеживать изменения в файлах прям в процессе. Поэтому мы устанавливаем интервал (в данном случае 1000 мс), по истечению которого галп будет проверять, изменилось ли что-то в файлах.
Приветствую, Юрий! У меня доработка gulp-changed не работала ( 2:23:59 ), пока не поменял .pipe(changed('./build/'),{hasChanged: changed.compareContents}) на .pipe(changed('./src/'),{hasChanged: changed.compareContents}). Почему у вас все работает ОК, не пойму. Несколько раз приходилось удалять пакеты и ставить старые версии, потому что новые уже через ES Modle заточены и раз переустановил ноду )) Но сборка очень хорошая!
Сейчас делал по этому видео, решил эту пробелму просто установив ту же версию что и на видео через "npm i gulp-changed@4.0.3 --save-dev" И все заработало
Плагину "gulp-file-include" параметры передавать не обязательно, импорт будет работать и без них, в документации к этому плагину эти параметры показаны как пример и указаны данные которые идут по дефолту.
Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?
1:28:18 - почему в исходном файле HTML подключенный файл JS описан как bundle? мы же его через webpack переименовываем при сборке? Зачем тогда вот это писали output: { filename: '[name].bundle.js' // заготовка для выходного файла в name передается имя файла js из строки 3 }, - у меня не переименовывается файл в bundle, [name].bundle.js - вот это он же должен подставлять
Здравствуйте! Спасибо за шикарную сборку и отличное понятное видео! Посоветуйте пожалуйста, как сюда прикрутить переход на страницу 404 с любого несуществующего адреса, если кто знает?
Отлично, но не хватает работы с svg Подскажите, насколько хороший вариант использовать gulp вместе с vite для вёрстки многостраничного сайта с частичным использованием vue?
Не понимаю зачем там vite, если сборку JS можно делать вебпаком и он у нас уже настроен и подключен. Если хотите попробуйте вместо него использовать vite, поищите решение для него.
Плагин gulp-sass-glob используется для упрощения импортирования с помощью @import. Но директива @import уже считается устаревший и скоро прекратится его поддержка. Ну и появился @use. А плагину gulp-sass-glob с ним не получится так импортировать одной строкой. Всё равно придётся прописывать каждый файл. Поэтому плагин gulp-sass-glob подойдёт только для @import. С другими коряво. Перепробовал разными способами. Есть ещё @forward, но с ним пока не разобрался. Может он поможет всё скопом импортировать и без gulp-sass-glob. Если у кого то получилось с помощью @use или @forward - отпишите, буду благодарен!
[ERR_REQUIRE_ESM]: require() of ES Module - несколько плагинов постоянно сыпят такие ошибки, в интере пишут что проблема с импортом и надо все переводить на модули, но в видео об этом нет информации
Добрый день Юрий, возникла проблема при запуске после написания дефолта и запуска, я нашел и исправил, но сами по себе стили в браузере (яндекс ) не компилируются, в плане вообще не воздейтсвуют как будто на html файл. Повторюсь, все делал абсолюьно точь в точь, файлы прикрепленны ссылками друг к дургу. Помогите разобраться пожалуйста :(
Юрий, спасибо большое за труд! Но не описали, как добавлять в сборку .js-файлы так, чтобы их сохранить отдельно, а не пихать их содержимое в [name].bundle.js Например я хочу сохранить jquery.min.js, как мне его прописать в сборке, чтобы он из src/js/modules сохранился в build/js и docs/js?
Андрей, приветствую. Спасибо за комментарий. Насчет вашего кейса, у меня не было такой задачи, соответственно, не смотрел как такое реализовать. Если правильно понял. То достаточно просто создать отдельный файл, подключить его непосредственно на страницу, и добавить gulp-таск который будет просто копировать нужный вам файл из src в build, а затем и в dist. Для примера с jQuery это подойдет.
Из полезного конвертер картинок в webP. Остальное не понятно для чего. Мне, например, чтобы задеплоить в продакшен, то что я сделал ради прикола на gulp после этого видео. Пришлось еще подключать gulp-replace плагин. Так как сразу встала проблема с тем, что в деве пути одни ко всему, в проде другие, так как там ЦМС и у нее свои приколы. При этом без реплейсера полетел автокомплид в деве, так как среда то видит относительно папок в src, а не от путей к файлам в папке с продакшеном. В общем хз, муть какая-то. Простые вещи какими-то костылями настраиваются. Вплоть до замены путей по регексу UPD: На второй день приключений обнаружилось что куча плагинов к gulp старье тотальное. Плагин webp-css отказался работать с мощным и популярным слайдером "swiper", вывалил кучу ошибок при подключении sass этого слайдера. Чудом нашел плагин с интересным и понятным названием "gulp-webp-css-fixed" где какой-то рандом все это пофиксил. В общем мужики, нахер вам это все надо, для "поиграться" сойдет. В остальном это просто набор каких-то палок в колеса.
@@МаркБелов-я9х смотря какой вам нужен функционал. Я лично не вкурил нафиг нужен этот костыль, чтоб в хтмл в шапку стили воткнуть)). Из полезного конвертер в вебп. Но как бы проще ручками сконвертить просто чтоб не спотыкаться об галп.
Здравствуйте, возникла проблема при переносе scss стилей. Они почему-то не показываются на странице. Хотя создаётся папка и в терминале ошибок не выдаёт. В чем может быть проблема?
у меня есть огромный вопрос, при установке плагинов инсталлятор на каждый из них пишет -deprecated, насколько я знаю это означает устаревший. чем его заменить и что с этим делать?
Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?
В принципе можно и прикрутить. Я бы отдельные скрипты прикрутил. Сам по себе bootstrap обновляется. Но если frontend брать - то там другие фреймворки / либы с компонентами - есть.
Добрый вечер, товарищи, может, кто-то сталкивался с проблемой "Error: ENOENT: no such file or directory, scandir ..." на моменте копирования файлов и шрифтрв, кажется, так в таймкоде, не подскажете, как бы мне решить эту проблемку?
1:42:21 после установки gulp-changed вот такая ошибка, что делать Error [ERR_REQUIRE_ESM]: require() of ES Module E:\1. Обучение Front-end\gulp-sborka ode_modules\gulp-changed\index.js from E:\1. Обучение Front-end\gulp-sborka\gulpfile.js not supported. Instead change the require of index.js in E:\1. Обучение Front-end\gulp-sborka\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (E:\1. Обучение Front-end\gulp-sborka\gulpfile.js:22:17) { code: 'ERR_REQUIRE_ESM' }
![[LIVE] : ONE ลุมพินี 86 | คู่เอก "คมเพชร vs ชาติพยัคฆ์"](http://i.ytimg.com/vi/m3q_dRYDuU8/mqdefault.jpg)
Отличный урок автор все продумал, объяснил без лишней воды, просто мега респект.
Спасибо огромное за ваш труд.Очень полезный курс по Gulp,однозначно лайки и подписка 😉😉
Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!
Большое вам спасибо Юрий за ваш труд!! Определенно куплю ваши курсы в ближайшем будущем. Все четко и по делу без лишней воды и замысловатых фраз, а главное доходчиво.
Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня.
Пусть никогда не иссякнет доброта и мудрость в учительском сердце!
Хороший урок и мастер класс. Юра ты лучший. И онлайн-школа Webcademy топ.
Всем здравствия.
В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp.
Спасибо! Лайк, подписка.
Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!
Сборка вообще бомба, без воды только по делу, благодарю за такой труд, подача на высоте!
Юрий, огромное спасибо за этот видео урок! Вы очень хороший учитель, объясняет все очень просто и понятно. 👍👍👍
Лучшее объяснение и практика. Огромное спасибо за ваш труд! В другом месте смотрел, не понял. У вас все понятно)
Спасибо за урок, было бы здорово сделать стрим и сверстать что-то на этой сборке ) Я думаю будет всем интересно )
Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs.
Спасибо за работу!
Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.
честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!
Спасибо) Старался, сначала хотел сделать базовый вариант сборки, но потом не удержался и сделал почти ультимативный. Несмотря на то что можно еще докрутить и добавить пару плагинов - результатом более чем доволен. Ну и код конечно для подписчиков, чтобы можно было нормально пользоваться) Удачи в веб-разработке!)
@@WebCademy огромное спасибо за то что выложил исходники сборки, уже который раз она экономит время, так как по не знанию и отсутсвие опыта я порой не могу найти где я написал ошибку, даже при наличии исходника я ее не могу найти((. но вот схходлник все быстро исправляет, потому что там нет ошибки))) Спасибо огромное!
ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!
Огромное спасибо за ваш труд, к сожалению на курс "JS Frontend разработчик" не смогу попасть ,но следующий точно не пропущу))
огромная благодарность за данный материал. все очень структурированно и понятно
Один из лучших каналов по разработке
Отличное видео!
Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)
Спасибо большое Юрий!
У вас всегда супер полезные уроки, спасибо
Спасибо очень большое за Gulp, понятное объяснение! Рекомендую! (52:22)
Юрий, ты тигр братан!
Огонь! Много полезных фишек
Спасибо чувак за то что ты делаешь, респект тебе и здоровья конечно)))
Крутое видео,все понятно
Лучший. Очень доволен сборкой. Многое понял из того что долго не мог усвоить
искал серебро, а нашёл золото!! это точно оно! этот канал и это видео золото!
✌Спасибо за урок! Можно обойтись без if() 44:55, в консоле есть совет, использовать опцию allowEmpty. Тогда в нашем случае строка 9 будет выглядеть следующим образом return gulp.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());
Спасибо, Юрий. Большую работу проделали.
Кстати, с помощью require там уже много чего не устанавливается. В документации уже по-другому. Только если версии из видео устанавливать.
Спасибо за урок
Урок просто топ. Юрий - профессионал.
@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍
Юрий, это опять я. Напишу коммент. Вдруг у кого-то возникнет такая же проблема при работе со сборкой. Хотя, возможно, просто я невнимательно смотрел видео и где-то допустил ошибки.
Суть. При создании двух слайдеров swiper на странице перестала автоматически перезагружаться страница. В консоли появилась ошибка. Оставляешь какой-то один слайдер на странице, - все работает. Если запускать сайт в браузере не через сборку (просто открыв index.html), ошибки в консоли нет.
До этого использовал browser-sync для автоматической перезагрузки страницы, а не gulp-server-livereload, и делал много слайдеров на swiperjs на одной странице. Никаких проблем не было. Решил откатиться к какой-то старой версии gulp-server-livereload. Но как оказалось, самой последней версии, как я понял, уже семь лет. И появилось подозрение, что откат к более старой версии вряд ли решит мою проблему.
В общем, отключил gulp-server-livereload и подключил browser-sync. Проблема исчезла. Автоматическая перезагрузка страницы стала работать, ошибка в консоли исчезла.
Была еще проблема с webp. Стал абсолютить картинки, делать object-fit. В папке build не оказывалось index.html. Решил просто отключить плагин. Вернусь к webp как-нибудь потом.
Спасибо
Спасибо Юрий, для сборки использовал всегда webpack, gulp юзал крайне редко, но посмотрев некоторые куски видео задумался... Если проект небольшой- необходимости в мощи webpack нет и gulp тут незаменим: простой, понятный и быстро конфигиться..
Видео отличное!
представляю как ты офигеешь, когда узнаешь, что есть Vite где вообще ничего настраивать не нужно.
@@MaDKnighT404 спасибо я в курсе vite)))
Спасибо! Очень полезный урок. Я много новых пакетов узнал )) Я значительно расширил свою сборку благодаря этому уроку. Хотя у меня сборка основана на pug и sass. Большое спасибо! Подписываюсь на канал, буду ждать новых отличных уроков.
Супер сборка, спасибо!
Спасибо, очень понятно и интересно😊
Полностью согласен с чатом, твоя сборка очень помогла. Даже я не знающий Js, понял как можно добавить некоторые плагины! В общем лайк тебе
Огромное спасибо за видео! Я как-то пробовал самостоятельно настроить GULP, но так как я новичок, у меня ничего не вышло. Сажусь пробовать еще раз но уже с Вашим гайдом! Желаю успехов и процветания каналу и автору!
Спасибо за комментарий!) Уверен по этому уроку у вас все получится!) Очень подробно и пошагово расписал все в видео, ну и готовый код сборки можно скачать, чтобы сверить со своим.
Лучшее объяснение работы с gulp !
Ценнейший материал!!!!
Юрий, это просто МОЩЬ! Огромное спасибо за сборку и подробнейшее объяснение!
Если у кого на 5 версии Gulp`a картинки превращаются в битые файлы, добавляем encoding: false
gulp.task('assets', function () {
return gulp.src(`./src/images/**/*`, {encoding: false})
.pipe(gulp.dest(`./dist/images`));
});
Превращаются. Ох уж эти версии.
@@АндрейМинск-т7щ если хоть одному человеку помогло, значит не зря написал 😉
@@yakut54 помогло - там ниже еще такие же проблемы - я скинул.
Спасибо, добрый человек! Я 4 часа точно убил на поиски информации, почему у меня бьются файлы шрифтов 😮💨
Ура! Спасибо!
Big thanks, bro! Your zip helped a lot.
Gulp умер, говорили они.... 🤥
Спасибо, чувак, за науку!
Они просто не умеют его готовить.
Подписка, лайк, колокол! 🥳
У кого возникли проблемы с плагином "gulp-changed" устанавливайте версию "gulp-changed": "^4.0.3", последняя которая поддерживает require, новые только с импортами, смешивать импорты и require не получится, хоть вроде есть какие то способы, но я так и не понял как ) так что более старая версия в помощь, да если кто знает как сочетать require и импорт в одном файле буду признателен!
Спасибо помог, а как насчет gulp-autoprefixer? там теперь тоже иморты
Тоже ломаю голову над этим
@@beegoodb1213 ну там соответсвенно ^8.0.0
У меня все получилось!😁
Ждал такой скринкаст
Здравствуйте Юрий, я сделал сборку Gulp + webpack конечно много чего я добавил. Дела даже не в этом, а в том когда я начал переделывать сборку на модуль ES6, то Javf script показал строгий режим, а при таком режим блокируется в браузере сам код JS и нужен плавен что бы его преобразовать И главное авторы которые на Ютубе показывать сборку на этом модули про плагин не слово не говорят transform-remove-strict-mode или напрямую через webpack 2. Так что я решил оставить так как есть Сделал все как у вас опять просто смысл перестраиваться это занимает время поиск решение проблемы в интернете и т.д
2:06:09
Обратите внимание, gulp-autoprefixer с версии 9.0.0 теперь поддерживает только ES Modules синтаксис импортов. Чтобы использовать его через require установите 8 версию
2:16:00
Аналогично с gulp-webp
С gulp-changed тоже самое!
А я как всегда стрим посмотреть не смог.Буду в записи смотреть.
Очень круто, видно автор серьезно подошел к сборке )) Огромное спасибо)) Всем добра и мира))
Спасибо))
Лучший!)
👍👍👍👍👍👍
Думаю ,автор слишком недооценил мощь фронтендеров, их ведь надо ,за ручку проводить и все разжевать.10 коммент про подключение стилей, автор, вы живы?))) (спасибо за видео, было очень приятно и полезно)
Спасибо за комментарий) Да действительно на монтаже пропустил момент с подключением стилей. Бывает)
Respect !!!
Будет ли Gulp актуален в 2024 году, есть например WebPack и так далее? Или сейчас в работе Frontend-разработчика он также актуален?
While it's true that the popularity of certain web development tools and technologies can change over time, it would be incorrect to say that Gulp is no longer relevant. Gulp has been a popular choice for many years and continues to be used in various projects. That being said, the web development ecosystem is constantly evolving, and new tools and technologies emerge to address specific needs and improve developer productivity. One such tool is Parcel, which has gained popularity in recent years.
Parcel's simplicity and ease of use have attracted developers who prefer a more streamlined setup without having to configure complex build pipelines. But I would recommend looking in the direction of crooked builders and Parcel, a more promising project than Gulp
Доброе время суток. Такой вопрос: при работе с scss выдает предупреждение о устаревании @import, это как-то можно убрать или будет использовать в будущем другой метод миграции?
Кто-нибудь знает, почему не работает watch? Таск запускается, но изменения не отслеживает как на видео. Переписывала точь-в-точь, не понимаю, что не так.
тоже такая проблема
@@IT-Proger8 я там нашла решение, надо в середину между путем и выбором таски добавить строчку {interval: 1000, usePolling: true}
Вот таким образом:
watch('./src/scss/**/*.scss', {interval: 1000, usePolling: true}, gulp.parallel('sass'));
И так для всех. Там, короче, не всегда файловая система позволяет отслеживать изменения в файлах прям в процессе. Поэтому мы устанавливаем интервал (в данном случае 1000 мс), по истечению которого галп будет проверять, изменилось ли что-то в файлах.
Приветствую, Юрий!
У меня доработка gulp-changed не работала ( 2:23:59 ), пока не поменял .pipe(changed('./build/'),{hasChanged: changed.compareContents}) на
.pipe(changed('./src/'),{hasChanged: changed.compareContents}). Почему у вас все работает ОК, не пойму.
Несколько раз приходилось удалять пакеты и ставить старые версии, потому что новые уже через ES Modle заточены и раз переустановил ноду ))
Но сборка очень хорошая!
Сейчас делал по этому видео, решил эту пробелму просто установив ту же версию что и на видео через "npm i gulp-changed@4.0.3 --save-dev"
И все заработало
Плагину "gulp-file-include" параметры передавать не обязательно, импорт будет работать и без них, в документации к этому плагину эти параметры показаны как пример и указаны данные которые идут по дефолту.
Здравствуйте, подскажите, что делать, если в папку "docs" не сохраняется css. (в папке "build" всё работает корректно)
Стайллинта не хватило очень и эдиторконфига. А так вообще огонь.
потише друг, Сатану не призови ненароком
Спасибо большое за видео! Скажите пожалуйста какая комбинация клавиш нужна чтоб скопировать файл (2:00:25) і (1:59:53)?
Выберите файл в панели с файлами и Ctrl + С (копировать) Ctrl + V (вставить)
Здравствуйте, будет ли подобное видео про webpack? 😊
Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?
Если вы про "рисованные" слайды - то нигде, это просто наброски для ролика.
Приветствую Юрий!
1:28:18 - почему в исходном файле HTML подключенный файл JS описан как bundle? мы же его через webpack переименовываем при сборке? Зачем тогда вот это писали output: {
filename: '[name].bundle.js' // заготовка для выходного файла в name передается имя файла js из строки 3
}, - у меня не переименовывается файл в bundle, [name].bundle.js - вот это он же должен подставлять
1:50:00 я совершенно не понял куда пропала папка blocks и почему мы ее убрали а в исходниках все что нужно осталось и код в страницах есть
Добротный курс, не хватает переменных scss
Здравствуйте! Спасибо за шикарную сборку и отличное понятное видео! Посоветуйте пожалуйста, как сюда прикрутить переход на страницу 404 с любого несуществующего адреса, если кто знает?
Данная сборка не работает полностью, так как некоторые пакеты gulp через require больше не подключаются!
Как можно через сборку gulp делать переходы для html с одной страницы на другую
Отлично, но не хватает работы с svg
Подскажите, насколько хороший вариант использовать gulp вместе с vite для вёрстки многостраничного сайта с частичным использованием vue?
Не понимаю зачем там vite, если сборку JS можно делать вебпаком и он у нас уже настроен и подключен. Если хотите попробуйте вместо него использовать vite, поищите решение для него.
Плагин gulp-sass-glob используется для упрощения импортирования с помощью @import. Но директива @import уже считается устаревший и скоро прекратится его поддержка. Ну и появился @use. А плагину gulp-sass-glob с ним не получится так импортировать одной строкой.
Всё равно придётся прописывать каждый файл. Поэтому плагин gulp-sass-glob подойдёт только для @import. С другими коряво. Перепробовал разными способами.
Есть ещё @forward, но с ним пока не разобрался. Может он поможет всё скопом импортировать и без gulp-sass-glob.
Если у кого то получилось с помощью @use или @forward - отпишите, буду благодарен!
[ERR_REQUIRE_ESM]: require() of ES Module - несколько плагинов постоянно сыпят такие ошибки, в интере пишут что проблема с импортом и надо все переводить на модули, но в видео об этом нет информации
Добрый день Юрий, возникла проблема при запуске после написания дефолта и запуска, я нашел и исправил, но сами по себе стили в браузере (яндекс ) не компилируются, в плане вообще не воздейтсвуют как будто на html файл. Повторюсь, все делал абсолюьно точь в точь, файлы прикрепленны ссылками друг к дургу. Помогите разобраться пожалуйста :(
Юрий, спасибо большое за труд! Но не описали, как добавлять в сборку .js-файлы так, чтобы их сохранить отдельно, а не пихать их содержимое в [name].bundle.js Например я хочу сохранить jquery.min.js, как мне его прописать в сборке, чтобы он из src/js/modules сохранился в build/js и docs/js?
Андрей, приветствую. Спасибо за комментарий. Насчет вашего кейса, у меня не было такой задачи, соответственно, не смотрел как такое реализовать.
Если правильно понял. То достаточно просто создать отдельный файл, подключить его непосредственно на страницу, и добавить gulp-таск который будет просто копировать нужный вам файл из src в build, а затем и в dist. Для примера с jQuery это подойдет.
Юрий, подскажите, можно ли создавать на этой сборке React-приложения? И если да, то что для этого нужно дополнительно установить?
The following tasks did not complete: sass
Did you forget to signal async completion? - вот такая ошибка при запуске gulp sass
Здравствуйте, подскажите пожалуйста, что за плагин вы используете, чтоб вам vscode выдавал такие подсказки по написанию?
Из полезного конвертер картинок в webP. Остальное не понятно для чего. Мне, например, чтобы задеплоить в продакшен, то что я сделал ради прикола на gulp после этого видео. Пришлось еще подключать gulp-replace плагин. Так как сразу встала проблема с тем, что в деве пути одни ко всему, в проде другие, так как там ЦМС и у нее свои приколы. При этом без реплейсера полетел автокомплид в деве, так как среда то видит относительно папок в src, а не от путей к файлам в папке с продакшеном. В общем хз, муть какая-то. Простые вещи какими-то костылями настраиваются. Вплоть до замены путей по регексу
UPD: На второй день приключений обнаружилось что куча плагинов к gulp старье тотальное. Плагин webp-css отказался работать с мощным и популярным слайдером "swiper", вывалил кучу ошибок при подключении sass этого слайдера. Чудом нашел плагин с интересным и понятным названием "gulp-webp-css-fixed" где какой-то рандом все это пофиксил. В общем мужики, нахер вам это все надо, для "поиграться" сойдет. В остальном это просто набор каких-то палок в колеса.
а какая альтернатива с таким же функционалом?
@@МаркБелов-я9х смотря какой вам нужен функционал. Я лично не вкурил нафиг нужен этот костыль, чтоб в хтмл в шапку стили воткнуть)). Из полезного конвертер в вебп. Но как бы проще ручками сконвертить просто чтоб не спотыкаться об галп.
gulplog v1 is deprecated. Please help your plugins update! - что делать в этой ситуации ? npm i update gulplog не помогает
Здравствуйте, возникла проблема при переносе scss стилей. Они почему-то не показываются на странице. Хотя создаётся папка и в терминале ошибок не выдаёт. В чем может быть проблема?
у меня такая же проблема, у вас получилось решить ее???
@@Liverpoolfc_1892 если я не ошибаюсь, там нужно в индекс обычное подключение css ('./css/main.css')
@media (max-width: var(--laptop-size)) {
padding-left: var(--container-padding);
} нельзя использовать переменнве в инициализации медиа запроса....
Категорически настаиваю на подобном мануале по Vitejs
у меня есть огромный вопрос, при установке плагинов инсталлятор на каждый из них пишет -deprecated, насколько я знаю это означает устаревший. чем его заменить и что с этим делать?
Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?
В принципе можно и прикрутить. Я бы отдельные скрипты прикрутил. Сам по себе bootstrap обновляется. Но если frontend брать - то там другие фреймворки / либы с компонентами - есть.
Здравствуйте. Спасибо большущее за сборку! Но почему то ссылочка для верстальщиков ВебКадеми не работает :(
Пофиксил t.me/+QAxmsKj2HyWfEKzz
@@WebCademyспасибо ❤
Если у вас не работает gulp-changed, то попробуйте установить старую его версию
npm install --save-dev gulp-changed@4 // не знаб хорошая ли это идея
ага, только так и заработал. Не получилось импортом подключить.
почему Livereload client connected после пишет много раз в терминале ? то есть происходит конект раз 10-15
Добрый вечер, товарищи, может, кто-то сталкивался с проблемой "Error: ENOENT: no such file or directory, scandir ..." на моменте копирования файлов и шрифтрв, кажется, так в таймкоде, не подскажете, как бы мне решить эту проблемку?
Скачайте готовую сборку с нашего ТГ канала. Так будет проще, чем пытаться понять где возможно была допущена ошибка.
1:42:21 после установки gulp-changed вот такая ошибка, что делать
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\1. Обучение Front-end\gulp-sborka
ode_modules\gulp-changed\index.js from E:\1. Обучение Front-end\gulp-sborka\gulpfile.js not supported.
Instead change the require of index.js in E:\1. Обучение Front-end\gulp-sborka\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
at Object. (E:\1. Обучение Front-end\gulp-sborka\gulpfile.js:22:17) {
code: 'ERR_REQUIRE_ESM'
}
как возможно сюда добавить поддержку typescript?разработку ведем на ts, а транспиляция в js?