Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, автопрефиксы

Рет қаралды 46,939

Күн бұрын

Gulp сборка для верстки сайтов. Обзор task менеджера Gulp и написание сборки. Работа с шаблонами в HTML, SASS / SCSS, авто-префиксы, минификация кода, scss glob. Сборка JS с помощью webpack, babel. Оптимизация изображений, автоматическое создание и подключение webp. Две версии сборки для разработки и оптимизированная production версия. Стартовый проект для html верстки.
Готовый код сборки: t.me/+9XtDDNBdHAk4Yjhi (пост за 28 Июня 2023)
Чат верстальщиков ВебКадеми: t.me/+QAxmsKj2HyWfEKzz
Подробно с пошаговыми объяснениями для новичков и начинающих.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
00:00 Введение
01:07 Теория. Что такое Gulp
09:18 Мой курс по JS frontend разработке
09:54 Установка Node JS
11:24 Создание проекта, установка первых пакетов
16:01 Установка gulp-cli
17:20 Gulp file и основы Gulp
21:07 Структура проекта
25:01 Готовая структура проекта
25:38 Сборка HTML gulp-fileinclude
33:23 Компиляция SCSS
36:23 Копирование изображений
38:51 Запуск сервера gulp-server-live-reload
41:14 Ctrl + C остановка процесса в терминале
41:41 Удаление папки dist - gulp-clean
48:04 Переименовываем таски
48:33 Watch. Слежение за файлами
53:15 Дефолтный таск. Запуск сборки
57:13 Исходные карты для CSS. gulp-sourcemaps
1:00:07 Группировка медиа запросов gulp-group-css-media-queries
1:03:43 Обработка ошибок и нотификации. gulp-plumber gulp-notify
1:09:32 Копирование шрифтов и файлов
1:11:40 Папка node_modules и .gitignore
1:13:42 Оптимизация настроек для plumber и notify
1:16:20 Сборка JS модулей и webpack. webpack-stream
1:24:19 Babel. Поддержка нового JS в старых браузерах
1:26:27 Разные JS файлы для разных страниц
1:30:58 JS модули. Пример подключения
1:32:19 NPM пакеты в верстке. Пример подключения. Календарь datepicker
1:36:17 Сжатие изображений. gulp-imagemin
1:39:20 Ускорение работы. gulp-changed
1:44:13 HTML таск. Внутренние страницы
1:50:00 HTML таск. Исключаем папку blocks из сборки в dist
1:51:20 Автоматическое подключение SCSS. gulp-sass-glob
1:54:05 2 версии сборки. DEV версия
2:00:21 Production версия сборки. Docs таск
2:01:26 Очистка dev версии
2:03:55 Настройка путей и имена задач в docs таске. Задача gulp docs
2:06:09 Автопрефиксы для CSS. gulp-autoprefixer
2:10:24 Минификация CSS. gulp-csso
2:11:34 Сжатие HTML. gulp-htmlclean
2:13:15 Автогенерация webp изображений. gulp-webp
2:16:20 Автоподключение webp в HTML. gulp-webp-html
2:19:58 Автоподключение webp в CSS. gulp-webp-css
2:22:29 Правка для gulp-changed в html таске
2:24:45 Обзор стартового проекта
2:40:08 Как передавать проект заказчику
2:42:33 Пример публикации проекта на GitHub Pages
2:45:27 Описание проекта на GitHub. readme.md
2:47:59 Где скачать gulp сборку. Мои авторские курсы
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews

Пікірлер: 276

@Ctrl_C.Ctrl_V 9 ай бұрын

Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!

@foxy_view 9 ай бұрын

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

@BryanskyM 11 ай бұрын

У вас всегда супер полезные уроки, спасибо

@Fisheries-Union4 11 ай бұрын

Сборка вообще бомба, без воды только по делу, благодарю за такой труд, подача на высоте!

@illiabulgakov2013 5 ай бұрын

Юрий, огромное спасибо за этот видео урок! Вы очень хороший учитель, объясняет все очень просто и понятно. 👍👍👍

@beegoodb1213 3 ай бұрын

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

@verygood5788 3 ай бұрын

Спасибо огромное за ваш труд.Очень полезный курс по Gulp,однозначно лайки и подписка 😉😉

@neleaonila2191 11 ай бұрын

Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня. Пусть никогда не иссякнет доброта и мудрость в учительском сердце!

@enot_poloskun007 2 ай бұрын

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

@tonikova3735 11 ай бұрын

Спасибо за урок, было бы здорово сделать стрим и сверстать что-то на этой сборке ) Я думаю будет всем интересно )

@joshuakelly6045 5 ай бұрын

Всем здравствия. В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp. Спасибо! Лайк, подписка.

@sad_gary 9 ай бұрын

ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!

@l0nelystranger581 11 ай бұрын

Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs. Спасибо за работу!

@redconfizbl1281 11 ай бұрын

огромная благодарность за данный материал. все очень структурированно и понятно

@amirial 8 ай бұрын

Лучшее объяснение и практика. Огромное спасибо за ваш труд! В другом месте смотрел, не понял. У вас все понятно)

@user-rw8wi3sq9e 11 ай бұрын

Хороший урок и мастер класс. Юра ты лучший. И онлайн-школа Webcademy топ.

@dominicvega1029 11 ай бұрын

Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)

@petrpetrovich-sg2jj 8 ай бұрын

Огромное спасибо за ваш труд, к сожалению на курс "JS Frontend разработчик" не смогу попасть ,но следующий точно не пропущу))

@MsDlovar 4 ай бұрын

Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.

@wireinet 6 ай бұрын

Спасибо! Очень полезный урок. Я много новых пакетов узнал )) Я значительно расширил свою сборку благодаря этому уроку. Хотя у меня сборка основана на pug и sass. Большое спасибо! Подписываюсь на канал, буду ждать новых отличных уроков.

@internationaluser86 9 ай бұрын

Спасибо, очень понятно и интересно😊

@mykytav 2 ай бұрын

Спасибо большое Юрий!

@sad_gary 10 ай бұрын

честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!

@WebCademy 10 ай бұрын

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

@sad_gary 10 ай бұрын

@@WebCademy огромное спасибо за то что выложил исходники сборки, уже который раз она экономит время, так как по не знанию и отсутсвие опыта я порой не могу найти где я написал ошибку, даже при наличии исходника я ее не могу найти((. но вот схходлник все быстро исправляет, потому что там нет ошибки))) Спасибо огромное!

@aibekbbic7821 11 ай бұрын

Юрий, ты тигр братан!

@user-rw8wi3sq9e 9 ай бұрын

@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍

@user-vp6bu3fg1o 9 ай бұрын

Спасибо чувак за то что ты делаешь, респект тебе и здоровья конечно)))

@user-xm9dd9hb5k 8 ай бұрын

Спасибо

@vastargazing8957 10 ай бұрын

Big thanks, bro! Your zip helped a lot.

@artem__k 5 ай бұрын

Огонь! Много полезных фишек

@user-sh3np2rh5x 8 ай бұрын

Супер сборка, спасибо!

@daniil5019 9 ай бұрын

Спасибо очень большое за Gulp, понятное объяснение! Рекомендую! (52:22)

@user-rl5od9qv1c 4 ай бұрын

Крутое видео,все понятно

@igorwagner7176 5 ай бұрын

Один из лучших каналов по разработке

@Aleks-lk1et 24 күн бұрын

Ценнейший материал!!!!

@CrusaderDen 7 ай бұрын

Урок просто топ. Юрий - профессионал.

@sad_gary 10 ай бұрын

искал серебро, а нашёл золото!! это точно оно! этот канал и это видео золото!

@ak-hs6dv 6 ай бұрын

Лучший. Очень доволен сборкой. Многое понял из того что долго не мог усвоить

@Greenfield-vn7qy 11 ай бұрын

Юрий, это просто МОЩЬ! Огромное спасибо за сборку и подробнейшее объяснение!

@ringnull 11 ай бұрын

Ждал такой скринкаст

@othersidesss1 11 ай бұрын

Лучшее объяснение работы с gulp !

@SergMcl 4 ай бұрын

Спасибо, Юрий. Большую работу проделали. Кстати, с помощью require там уже много чего не устанавливается. В документации уже по-другому. Только если версии из видео устанавливать.

@upwlqwp 11 ай бұрын

Спасибо))

@SergMcl 4 ай бұрын

Юрий, это опять я. Напишу коммент. Вдруг у кого-то возникнет такая же проблема при работе со сборкой. Хотя, возможно, просто я невнимательно смотрел видео и где-то допустил ошибки. Суть. При создании двух слайдеров swiper на странице перестала автоматически перезагружаться страница. В консоли появилась ошибка. Оставляешь какой-то один слайдер на странице, - все работает. Если запускать сайт в браузере не через сборку (просто открыв index.html), ошибки в консоли нет. До этого использовал browser-sync для автоматической перезагрузки страницы, а не gulp-server-livereload, и делал много слайдеров на swiperjs на одной странице. Никаких проблем не было. Решил откатиться к какой-то старой версии gulp-server-livereload. Но как оказалось, самой последней версии, как я понял, уже семь лет. И появилось подозрение, что откат к более старой версии вряд ли решит мою проблему. В общем, отключил gulp-server-livereload и подключил browser-sync. Проблема исчезла. Автоматическая перезагрузка страницы стала работать, ошибка в консоли исчезла. Была еще проблема с webp. Стал абсолютить картинки, делать object-fit. В папке build не оказывалось index.html. Решил просто отключить плагин. Вернусь к webp как-нибудь потом.

@nikosin94 29 күн бұрын

✌Спасибо за урок! Можно обойтись без if() 44:55, в консоле есть совет, использовать опцию allowEmpty. Тогда в нашем случае строка 9 будет выглядеть следующим образом return gulp.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());

@_fulgrim_9865 11 ай бұрын

Лучший!)

@galievramil1169 4 ай бұрын

Спасибо Юрий, для сборки использовал всегда webpack, gulp юзал крайне редко, но посмотрев некоторые куски видео задумался... Если проект небольшой- необходимости в мощи webpack нет и gulp тут незаменим: простой, понятный и быстро конфигиться.. Видео отличное!

@MaDKnighT404 3 ай бұрын

представляю как ты офигеешь, когда узнаешь, что есть Vite где вообще ничего настраивать не нужно.

@galievramil1169 3 ай бұрын

@@MaDKnighT404 спасибо я в курсе vite)))

@user-gt2sq7xu7y 9 ай бұрын

Respect !!!

@tryfry5047 11 ай бұрын

👍👍👍👍👍👍

@user-lj1to7le9w 9 ай бұрын

Автор, ты Человечище.

@user-km6qf9ot2l 11 ай бұрын

Приветствую Юрий!

@UltimatePowerCoder 11 ай бұрын

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

@WebCademy 11 ай бұрын

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

@yakut54 Ай бұрын

Gulp умер, говорили они.... 🤥 Спасибо, чувак, за науку! Они просто не умеют его готовить. Подписка, лайк, колокол! 🥳

@aim6883 4 ай бұрын

Полностью согласен с чатом, твоя сборка очень помогла. Даже я не знающий Js, понял как можно добавить некоторые плагины! В общем лайк тебе

@user-wm5wk8pe9o 9 ай бұрын

У меня все получилось!😁

@Andrew_Dreamer13 11 ай бұрын

А я как всегда стрим посмотреть не смог.Буду в записи смотреть.

@user-hb9bk5ek7r 4 ай бұрын

У кого возникли проблемы с плагином "gulp-changed" устанавливайте версию "gulp-changed": "^4.0.3", последняя которая поддерживает require, новые только с импортами, смешивать импорты и require не получится, хоть вроде есть какие то способы, но я так и не понял как ) так что более старая версия в помощь, да если кто знает как сочетать require и импорт в одном файле буду признателен!

@beegoodb1213 3 ай бұрын

Спасибо помог, а как насчет gulp-autoprefixer? там теперь тоже иморты

@jongorlov8078 2 ай бұрын

Тоже ломаю голову над этим

@user-xi5zy6kt3r 10 ай бұрын

Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?

@WebCademy 10 ай бұрын

Если вы про "рисованные" слайды - то нигде, это просто наброски для ролика.

@Greenfield-vn7qy 6 ай бұрын

Юрий, подскажите, можно ли создавать на этой сборке React-приложения? И если да, то что для этого нужно дополнительно установить?

@mortarion766 8 ай бұрын

Очень круто, видно автор серьезно подошел к сборке )) Огромное спасибо)) Всем добра и мира))

@ringnull 10 ай бұрын

Добротный курс, не хватает переменных scss

@user-sl9bz9fq1y 3 ай бұрын

Здравствуйте, будет ли подобное видео про webpack? 😊

@user-tq4kj5do1s 5 ай бұрын

Здравствуйте Юрий, я сделал сборку Gulp + webpack конечно много чего я добавил. Дела даже не в этом, а в том когда я начал переделывать сборку на модуль ES6, то Javf script показал строгий режим, а при таком режим блокируется в браузере сам код JS и нужен плавен что бы его преобразовать И главное авторы которые на Ютубе показывать сборку на этом модули про плагин не слово не говорят transform-remove-strict-mode или напрямую через webpack 2. Так что я решил оставить так как есть Сделал все как у вас опять просто смысл перестраиваться это занимает время поиск решение проблемы в интернете и т.д

@Fnderas 25 күн бұрын

Здравствуйте, подскажите пожалуйста, что за плагин вы используете, чтоб вам vscode выдавал такие подсказки по написанию?

@steddy7517 8 ай бұрын

Здравствуйте, подскажите, что делать, если в папку "docs" не сохраняется css. (в папке "build" всё работает корректно)

@konstantinkuznecov5585 9 ай бұрын

Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?

@WebCademy 9 ай бұрын

В принципе можно и прикрутить. Я бы отдельные скрипты прикрутил. Сам по себе bootstrap обновляется. Но если frontend брать - то там другие фреймворки / либы с компонентами - есть.

@newageteam 6 ай бұрын

Отлично, но не хватает работы с svg Подскажите, насколько хороший вариант использовать gulp вместе с vite для вёрстки многостраничного сайта с частичным использованием vue?

@WebCademy 6 ай бұрын

Не понимаю зачем там vite, если сборку JS можно делать вебпаком и он у нас уже настроен и подключен. Если хотите попробуйте вместо него использовать vite, поищите решение для него.

@userazil 10 ай бұрын

Я хочу готовую папку build (ранее dist) задеплоить на gh-pages: использую пакет gulp-gh-pages и таск gulp.task('deploy', function () { return gulp.src('./dist/**/*') .pipe(ghPages()); }); При этом у меня создается еще одна папка ./publish, в которую почему-то складываются все папки и файлы, что есть в проекте, но на ветку gh-pages собранный build не попадает (даже пыталась создать ее вручную). Подскажите, пож, на что смотреть, я уже перелопатила все интернеты, не работает

@user-ls5es6nh6x 7 ай бұрын

2:06:09 Обратите внимание, gulp-autoprefixer с версии 9.0.0 теперь поддерживает только ES Modules синтаксис импортов. Чтобы использовать его через require установите 8 версию 2:16:00 Аналогично с gulp-webp

@vadok111 7 ай бұрын

С gulp-changed тоже самое!

@nessyyt4118 3 ай бұрын

Спасибо большое за видео! Скажите пожалуйста какая комбинация клавиш нужна чтоб скопировать файл (2:00:25) і (1:59:53)?

@WebCademy 3 ай бұрын

Выберите файл в панели с файлами и Ctrl + С (копировать) Ctrl + V (вставить)

@svay6849 6 ай бұрын

как возможно сюда добавить поддержку typescript?разработку ведем на ts, а транспиляция в js?

@yphitz3340 8 ай бұрын

Сборка мега крутая, но когда запускаю gulp docs, получаю ошибку: gulp-notify: [SCSS] Error undefined:266:8: property missing ':'

@alexkuzmenko5202 9 ай бұрын

Добрый день, извините за тупой вопрос но как в эту сборку добавить browsersync?

@Liverpoolfc_1892 Ай бұрын

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

@hq-web 11 ай бұрын

Плагину "gulp-file-include" параметры передавать не обязательно, импорт будет работать и без них, в документации к этому плагину эти параметры показаны как пример и указаны данные которые идут по дефолту.

@kubris.developer 6 ай бұрын

Приветствую, Юрий! У меня доработка gulp-changed не работала ( 2:23:59 ), пока не поменял .pipe(changed('./build/'),{hasChanged: changed.compareContents}) на .pipe(changed('./src/'),{hasChanged: changed.compareContents}). Почему у вас все работает ОК, не пойму. Несколько раз приходилось удалять пакеты и ставить старые версии, потому что новые уже через ES Modle заточены и раз переустановил ноду )) Но сборка очень хорошая!

@jenkneo1641 2 ай бұрын

Сейчас делал по этому видео, решил эту пробелму просто установив ту же версию что и на видео через "npm i gulp-changed@4.0.3 --save-dev" И все заработало

@gerylap4539 3 ай бұрын

почему Livereload client connected после пишет много раз в терминале ? то есть происходит конект раз 10-15

@BryanskyM 8 ай бұрын

Подскажите, пожалуйста, task про формат webp для svg не будет работать? Он только на png и jpg должен влиять?

@WebCademy 7 ай бұрын

Для, для SVG он не сработает, пропустит этот формат.

@user-fv8gu4nb6o 4 ай бұрын

Здравствуйте! Спасибо за шикарную сборку и отличное понятное видео! Посоветуйте пожалуйста, как сюда прикрутить переход на страницу 404 с любого несуществующего адреса, если кто знает?

@AynaOracle 8 ай бұрын

Стайллинта не хватило очень и эдиторконфига. А так вообще огонь.

@user-wm5wk8pe9o 8 ай бұрын

потише друг, Сатану не призови ненароком

@vadok111 7 ай бұрын

Данная сборка не работает полностью, так как некоторые пакеты gulp через require больше не подключаются!

@begiiimirzayev1359 7 ай бұрын

Добрый день. А где можно скачать данную сборку ?

@min8132 3 ай бұрын

у меня сочетание клавиш ctrl + C в терминале не останавливает live reload, не знаете как решить проблему? Хочу отметить что нажимаю именно в терминале, а не в других окнах. И там пишется так: PS C:\Users\mindu\Desktop\learning HTML\test-2> ^C

@AntonioBenderas 9 ай бұрын

Категорически настаиваю на подобном мануале по Vitejs

@rozelia_777 11 ай бұрын

Здравствуйте. Спасибо большущее за сборку! Но почему то ссылочка для верстальщиков ВебКадеми не работает :(

@WebCademy 11 ай бұрын

Пофиксил t.me/+QAxmsKj2HyWfEKzz

@rozelia_777 11 ай бұрын

@@WebCademyспасибо ❤

@justtwic 11 ай бұрын

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

@web__pavlovo Ай бұрын

The following tasks did not complete: sass Did you forget to signal async completion? - вот такая ошибка при запуске gulp sass

@yakut54 Ай бұрын

Если у кого на 5 версии Gulp`a картинки превращаются в битые файлы, добавляем encoding: false gulp.task('assets', function () { return gulp.src(`./src/images/**/*`, {encoding: false}) .pipe(gulp.dest(`./dist/images`)); });

@user-bi6ml4wo3y 15 күн бұрын

Превращаются. Ох уж эти версии.

@yakut54 15 күн бұрын

@@user-bi6ml4wo3y если хоть одному человеку помогло, значит не зря написал 😉

@user-bi6ml4wo3y 14 күн бұрын

@@yakut54 помогло - там ниже еще такие же проблемы - я скинул.

@girynski 2 күн бұрын

Спасибо, добрый человек! Я 4 часа точно убил на поиски информации, почему у меня бьются файлы шрифтов 😮‍💨

@Evgenius-PRO 9 ай бұрын

Юрий,еще раз здравствуйте! снова я только в другом ролике😆 У вас macOS но команды я так понимаю все для windows? потому что на macOS многие эти команды вызовут ошибку проверял недавно тк в нем просит sudo команду а так же где то видел многие используют на маке yarn. Хотелось бы услышать вас как правильно все сделать на маке. Очень бы хотелось увидеть от вас установку gulp именно на MacOS так как. это всё же несколько отличается от win сам процесс установки того де git bash. Еще сейчас есть npm 9,8,1 версия, нужно ли обновляться ? Спасибо большое за урок! И заранее спасибо за ответ! 🙏

@WebCademy 9 ай бұрын

Евгений, приветствую. Команды я проговариваю и для macOS, к слову ролик записан на маке. sudo необходимо добавлять в начале для глобальной установки пакетов, об этом упоминаю. yarn - это аналог npm, его использовать не обязательно, я его не использую. npm - можно обновить, у меня сейчас 8 стоит, все норм.

@Evgenius-PRO 9 ай бұрын

@@WebCademy большое спасибо!

@chilibean6152 10 ай бұрын

А если в режиме docs сообщает об ошибке при подключении шрифтов через импорт это норм? В режиме gulp ошибки нет

@WebCademy 10 ай бұрын

Проверьте синтаксис подключения. Возможно что-то не так указали.

@user-dy7fj6xn3q 8 ай бұрын

Спасибо за подробное видео! При билде появляется ошибка. Как ее пофиксить? "(node:12392) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated"

@andreyshepel1213 4 ай бұрын

Юрий, спасибо большое за труд! Но не описали, как добавлять в сборку .js-файлы так, чтобы их сохранить отдельно, а не пихать их содержимое в [name].bundle.js Например я хочу сохранить jquery.min.js, как мне его прописать в сборке, чтобы он из src/js/modules сохранился в build/js и docs/js?

@WebCademy 4 ай бұрын

Андрей, приветствую. Спасибо за комментарий. Насчет вашего кейса, у меня не было такой задачи, соответственно, не смотрел как такое реализовать. Если правильно понял. То достаточно просто создать отдельный файл, подключить его непосредственно на страницу, и добавить gulp-таск который будет просто копировать нужный вам файл из src в build, а затем и в dist. Для примера с jQuery это подойдет.

@ytrytrytry7428 9 ай бұрын

в папке дист появляется папка css со стилями, footer и header вместе но сами стили не применяются, точнее если запустить index.html из дист через опен сервер то все работает со стилями, если через галп сервер то стилей нет

@user-gb6hl9my9o 8 ай бұрын

В папке src в html-файле нужно подключить стили по этому пути

@cryptolearn4635 9 ай бұрын

Подскажите цветовую тему VS Code у Вас и шрифт пожалуйста

@WebCademy 9 ай бұрын

Тема PaleNight, шрифт Menlo

@gedonik 11 ай бұрын

Не подскажите где посмотреть полную настройку vs code автора с настройками переносов, заполнений, темами, расширениями, сниппетами и прочим ?

@WebCademy 11 ай бұрын

Подскажем) kzfaq.info/get/bejne/ebKKhZWV05zFZpc.html

@gedonik 11 ай бұрын

@@WebCademy Спасибо

@user-or1hy4xz8u 10 ай бұрын

Приветствую! Вот скачал сборку с телеграма, можно ведь всё установить командой "npm i --save-dev"? Ведь не обязательно перечислять все пакеты при установке? Оно автоматически подхватить все нужные пакеты из package.json?

@WebCademy 10 ай бұрын

Конечно, просто npm i - и сборка готова к работе. Все пакеты из package.json будут установлены.

@user-or1hy4xz8u 10 ай бұрын

@@WebCademy , Юрий, если сможете найти немного времени, то неплохо бы уточнить инструкцию по сборке для новичков... Например, звучали вопросы, обязательно ли "--save-dev" при первичной установке и т.п. ...

@dmytroUA 10 ай бұрын

спасибо за видео. коммент по поводу clean. Если убрать trailing slash ('./dist' вместо './dist/'), а также использовать опцию allowEmpty, то не необходимости проверять, существует ли папка: gulp.task('clean', function () { return gulp.src('./dist', { allowEmpty: true }).pipe(clean()); });

@user-sc9jm6vw6t 7 ай бұрын

Добрый день! Развернул вашу сборку, но почему-то не работает autoprefixer. Ошибок в консоли нет. Как минимум в стартовом шаблоне должен box-sizing: webkit префиксер давать. Что может быть не так, подскажите, плиз

@WebCademy 7 ай бұрын

Посмотрите настройки автопрефиксера. Поставьте больше старых браузеров. Попробуйте с другими свойствами. Например с display: grid;

@user-uu7xn5si2h 11 ай бұрын

Спасибо за урок! Я не совсем могу понять в чем разница между папками build и docs? Заранее спасибо за ответ.

@WebCademy 11 ай бұрын

Папка build собирается в процессе разработки. В таске build мы не используем оптимизацию изображений и сжатие / оптимизацию CSS - для более быстрой работы сборки. docs - сжатая версия для загрузки на хостинг (сжатые картинки, оптимизированный и минифицированный код).

@nelson.gold_cat 11 ай бұрын

Галп сам сжимает?Даже если мы закинем в проект картинки по 100мб, то он из превратит в 50килобайт к примеру?

@WebCademy 11 ай бұрын

@@nelson.gold_cat 100 мб возможно сожмет до 50 Мб. Сжимает не gulp, а пакет imagemin который мы используем в сборке

@nelson.gold_cat 11 ай бұрын

@@WebCademy понял. Спасибо. Да, напишу благодарность Юрию, раз есть возможность за курсы)