Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, автопрефиксы
Вставка
- Опубліковано 11 чер 2024
- 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
Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!
Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!
У вас всегда супер полезные уроки, спасибо
Сборка вообще бомба, без воды только по делу, благодарю за такой труд, подача на высоте!
Юрий, огромное спасибо за этот видео урок! Вы очень хороший учитель, объясняет все очень просто и понятно. 👍👍👍
Спасибо огромное за ваш труд.Очень полезный курс по Gulp,однозначно лайки и подписка 😉😉
Большое вам спасибо Юрий за ваш труд!! Определенно куплю ваши курсы в ближайшем будущем. Все четко и по делу без лишней воды и замысловатых фраз, а главное доходчиво.
Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня.
Пусть никогда не иссякнет доброта и мудрость в учительском сердце!
Отличный урок автор все продумал, объяснил без лишней воды, просто мега респект.
Спасибо за урок, было бы здорово сделать стрим и сверстать что-то на этой сборке ) Я думаю будет всем интересно )
ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!
Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs.
Спасибо за работу!
огромная благодарность за данный материал. все очень структурированно и понятно
Лучшее объяснение и практика. Огромное спасибо за ваш труд! В другом месте смотрел, не понял. У вас все понятно)
Хороший урок и мастер класс. Юра ты лучший. И онлайн-школа Webcademy топ.
Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)
Всем здравствия.
В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp.
Спасибо! Лайк, подписка.
Огромное спасибо за ваш труд, к сожалению на курс "JS Frontend разработчик" не смогу попасть ,но следующий точно не пропущу))
Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.
Спасибо! Очень полезный урок. Я много новых пакетов узнал )) Я значительно расширил свою сборку благодаря этому уроку. Хотя у меня сборка основана на pug и sass. Большое спасибо! Подписываюсь на канал, буду ждать новых отличных уроков.
Спасибо, очень понятно и интересно😊
Спасибо большое Юрий!
честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!
Спасибо) Старался, сначала хотел сделать базовый вариант сборки, но потом не удержался и сделал почти ультимативный. Несмотря на то что можно еще докрутить и добавить пару плагинов - результатом более чем доволен. Ну и код конечно для подписчиков, чтобы можно было нормально пользоваться) Удачи в веб-разработке!)
@@WebCademy огромное спасибо за то что выложил исходники сборки, уже который раз она экономит время, так как по не знанию и отсутсвие опыта я порой не могу найти где я написал ошибку, даже при наличии исходника я ее не могу найти((. но вот схходлник все быстро исправляет, потому что там нет ошибки))) Спасибо огромное!
Юрий, ты тигр братан!
@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍
Спасибо чувак за то что ты делаешь, респект тебе и здоровья конечно)))
Спасибо
Big thanks, bro! Your zip helped a lot.
Супер сборка, спасибо!
Огонь! Много полезных фишек
Спасибо очень большое за Gulp, понятное объяснение! Рекомендую! (52:22)
Крутое видео,все понятно
Ценнейший материал!!!!
Один из лучших каналов по разработке
Урок просто топ. Юрий - профессионал.
искал серебро, а нашёл золото!! это точно оно! этот канал и это видео золото!
Лучший. Очень доволен сборкой. Многое понял из того что долго не мог усвоить
Юрий, это просто МОЩЬ! Огромное спасибо за сборку и подробнейшее объяснение!
Ждал такой скринкаст
Лучшее объяснение работы с gulp !
Спасибо, Юрий. Большую работу проделали.
Кстати, с помощью require там уже много чего не устанавливается. В документации уже по-другому. Только если версии из видео устанавливать.
✌Спасибо за урок! Можно обойтись без if() 44:55, в консоле есть совет, использовать опцию allowEmpty. Тогда в нашем случае строка 9 будет выглядеть следующим образом return gulp.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());
Спасибо))
Юрий, это опять я. Напишу коммент. Вдруг у кого-то возникнет такая же проблема при работе со сборкой. Хотя, возможно, просто я невнимательно смотрел видео и где-то допустил ошибки.
Суть. При создании двух слайдеров 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)))
Respect !!!
👍👍👍👍👍👍
Автор, ты Человечище.
Приветствую Юрий!
Огромное спасибо за видео! Я как-то пробовал самостоятельно настроить GULP, но так как я новичок, у меня ничего не вышло. Сажусь пробовать еще раз но уже с Вашим гайдом! Желаю успехов и процветания каналу и автору!
Спасибо за комментарий!) Уверен по этому уроку у вас все получится!) Очень подробно и пошагово расписал все в видео, ну и готовый код сборки можно скачать, чтобы сверить со своим.
Gulp умер, говорили они.... 🤥
Спасибо, чувак, за науку!
Они просто не умеют его готовить.
Подписка, лайк, колокол! 🥳
Полностью согласен с чатом, твоя сборка очень помогла. Даже я не знающий Js, понял как можно добавить некоторые плагины! В общем лайк тебе
У кого возникли проблемы с плагином "gulp-changed" устанавливайте версию "gulp-changed": "^4.0.3", последняя которая поддерживает require, новые только с импортами, смешивать импорты и require не получится, хоть вроде есть какие то способы, но я так и не понял как ) так что более старая версия в помощь, да если кто знает как сочетать require и импорт в одном файле буду признателен!
Спасибо помог, а как насчет gulp-autoprefixer? там теперь тоже иморты
Тоже ломаю голову над этим
У меня все получилось!😁
А я как всегда стрим посмотреть не смог.Буду в записи смотреть.
Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?
Если вы про "рисованные" слайды - то нигде, это просто наброски для ролика.
Очень круто, видно автор серьезно подошел к сборке )) Огромное спасибо)) Всем добра и мира))
Юрий, подскажите, можно ли создавать на этой сборке React-приложения? И если да, то что для этого нужно дополнительно установить?
Добротный курс, не хватает переменных scss
Здравствуйте, будет ли подобное видео про webpack? 😊
Здравствуйте Юрий, я сделал сборку Gulp + webpack конечно много чего я добавил. Дела даже не в этом, а в том когда я начал переделывать сборку на модуль ES6, то Javf script показал строгий режим, а при таком режим блокируется в браузере сам код JS и нужен плавен что бы его преобразовать И главное авторы которые на Ютубе показывать сборку на этом модули про плагин не слово не говорят transform-remove-strict-mode или напрямую через webpack 2. Так что я решил оставить так как есть Сделал все как у вас опять просто смысл перестраиваться это занимает время поиск решение проблемы в интернете и т.д
Здравствуйте, подскажите пожалуйста, что за плагин вы используете, чтоб вам vscode выдавал такие подсказки по написанию?
Здравствуйте, подскажите, что делать, если в папку "docs" не сохраняется css. (в папке "build" всё работает корректно)
Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?
В принципе можно и прикрутить. Я бы отдельные скрипты прикрутил. Сам по себе bootstrap обновляется. Но если frontend брать - то там другие фреймворки / либы с компонентами - есть.
Отлично, но не хватает работы с svg
Подскажите, насколько хороший вариант использовать gulp вместе с vite для вёрстки многостраничного сайта с частичным использованием vue?
Не понимаю зачем там vite, если сборку JS можно делать вебпаком и он у нас уже настроен и подключен. Если хотите попробуйте вместо него использовать vite, поищите решение для него.
Я хочу готовую папку build (ранее dist) задеплоить на gh-pages: использую пакет gulp-gh-pages и таск
gulp.task('deploy', function () {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
При этом у меня создается еще одна папка ./publish, в которую почему-то складываются все папки и файлы, что есть в проекте, но на ветку gh-pages собранный build не попадает (даже пыталась создать ее вручную). Подскажите, пож, на что смотреть, я уже перелопатила все интернеты, не работает
2:06:09
Обратите внимание, gulp-autoprefixer с версии 9.0.0 теперь поддерживает только ES Modules синтаксис импортов. Чтобы использовать его через require установите 8 версию
2:16:00
Аналогично с gulp-webp
С gulp-changed тоже самое!
Спасибо большое за видео! Скажите пожалуйста какая комбинация клавиш нужна чтоб скопировать файл (2:00:25) і (1:59:53)?
Выберите файл в панели с файлами и Ctrl + С (копировать) Ctrl + V (вставить)
как возможно сюда добавить поддержку typescript?разработку ведем на ts, а транспиляция в js?
Сборка мега крутая, но когда запускаю gulp docs, получаю ошибку: gulp-notify: [SCSS] Error undefined:266:8: property missing ':'
Добрый день, извините за тупой вопрос но как в эту сборку добавить browsersync?
Здравствуйте, почему у меня css стили не применяються, вроде при запуске ошибок никаких не выдает а вот стили не применяються только голый HTML , все уже по три раза перепроверил.
Плагину "gulp-file-include" параметры передавать не обязательно, импорт будет работать и без них, в документации к этому плагину эти параметры показаны как пример и указаны данные которые идут по дефолту.
Приветствую, Юрий!
У меня доработка 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"
И все заработало
почему Livereload client connected после пишет много раз в терминале ? то есть происходит конект раз 10-15
Подскажите, пожалуйста, task про формат webp для svg не будет работать? Он только на png и jpg должен влиять?
Для, для SVG он не сработает, пропустит этот формат.
Стайллинта не хватило очень и эдиторконфига. А так вообще огонь.
потише друг, Сатану не призови ненароком
Здравствуйте! Спасибо за шикарную сборку и отличное понятное видео! Посоветуйте пожалуйста, как сюда прикрутить переход на страницу 404 с любого несуществующего адреса, если кто знает?
Данная сборка не работает полностью, так как некоторые пакеты gulp через require больше не подключаются!
Добрый день. А где можно скачать данную сборку ?
у меня сочетание клавиш ctrl + C в терминале не останавливает live reload, не знаете как решить проблему? Хочу отметить что нажимаю именно в терминале, а не в других окнах. И там пишется так: PS C:\Users\mindu\Desktop\learning HTML\test-2> ^C
Категорически настаиваю на подобном мануале по Vitejs
Здравствуйте. Спасибо большущее за сборку! Но почему то ссылочка для верстальщиков ВебКадеми не работает :(
Пофиксил t.me/+QAxmsKj2HyWfEKzz
@@WebCademyспасибо ❤
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
The following tasks did not complete: sass
Did you forget to signal async completion? - вот такая ошибка при запуске gulp sass
Юрий,еще раз здравствуйте! снова я только в другом ролике😆 У вас macOS но команды я так понимаю все для windows? потому что на macOS многие эти команды вызовут ошибку проверял недавно тк в нем просит sudo команду а так же где то видел многие используют на маке yarn. Хотелось бы услышать вас как правильно все сделать на маке. Очень бы хотелось увидеть от вас установку gulp именно на MacOS так как. это всё же несколько отличается от win сам процесс установки того де git bash. Еще сейчас есть npm 9,8,1 версия, нужно ли обновляться ? Спасибо большое за урок! И заранее спасибо за ответ! 🙏
Евгений, приветствую. Команды я проговариваю и для macOS, к слову ролик записан на маке. sudo необходимо добавлять в начале для глобальной установки пакетов, об этом упоминаю. yarn - это аналог npm, его использовать не обязательно, я его не использую. npm - можно обновить, у меня сейчас 8 стоит, все норм.
@@WebCademy большое спасибо!
А если в режиме docs сообщает об ошибке при подключении шрифтов через импорт это норм? В режиме gulp ошибки нет
Проверьте синтаксис подключения. Возможно что-то не так указали.
Спасибо за подробное видео! При билде появляется ошибка. Как ее пофиксить? "(node:12392) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated"
Юрий, спасибо большое за труд! Но не описали, как добавлять в сборку .js-файлы так, чтобы их сохранить отдельно, а не пихать их содержимое в [name].bundle.js Например я хочу сохранить jquery.min.js, как мне его прописать в сборке, чтобы он из src/js/modules сохранился в build/js и docs/js?
Андрей, приветствую. Спасибо за комментарий. Насчет вашего кейса, у меня не было такой задачи, соответственно, не смотрел как такое реализовать.
Если правильно понял. То достаточно просто создать отдельный файл, подключить его непосредственно на страницу, и добавить gulp-таск который будет просто копировать нужный вам файл из src в build, а затем и в dist. Для примера с jQuery это подойдет.
в папке дист появляется папка css со стилями, footer и header вместе но сами стили не применяются, точнее если запустить index.html из дист через опен сервер то все работает со стилями, если через галп сервер то стилей нет
В папке src в html-файле нужно подключить стили по этому пути
Если у кого на 5 версии Gulp`a картинки превращаются в битые файлы, добавляем encoding: false
gulp.task('assets', function () {
return gulp.src(`./src/images/**/*`, {encoding: false})
.pipe(gulp.dest(`./dist/images`));
});
Превращаются. Ох уж эти версии.
@@user-bi6ml4wo3y если хоть одному человеку помогло, значит не зря написал 😉
@@yakut54 помогло - там ниже еще такие же проблемы - я скинул.
Спасибо, добрый человек! Я 4 часа точно убил на поиски информации, почему у меня бьются файлы шрифтов 😮💨
Подскажите цветовую тему VS Code у Вас и шрифт пожалуйста
Тема PaleNight, шрифт Menlo
Не подскажите где посмотреть полную настройку vs code автора с настройками переносов, заполнений, темами, расширениями, сниппетами и прочим ?
Подскажем) ua-cam.com/video/CLZR2dn6a6c/v-deo.html
@@WebCademy Спасибо
спасибо за видео.
коммент по поводу clean. Если убрать trailing slash ('./dist' вместо './dist/'), а также использовать опцию allowEmpty, то не необходимости проверять, существует ли папка:
gulp.task('clean', function () {
return gulp.src('./dist', { allowEmpty: true }).pipe(clean());
});
Приветствую!
Вот скачал сборку с телеграма, можно ведь всё установить командой "npm i --save-dev"?
Ведь не обязательно перечислять все пакеты при установке? Оно автоматически подхватить все нужные пакеты из package.json?
Конечно, просто npm i - и сборка готова к работе. Все пакеты из package.json будут установлены.
@@WebCademy , Юрий, если сможете найти немного времени, то неплохо бы уточнить инструкцию по сборке для новичков... Например, звучали вопросы, обязательно ли "--save-dev" при первичной установке и т.п. ...
Добрый день! Развернул вашу сборку, но почему-то не работает autoprefixer. Ошибок в консоли нет. Как минимум в стартовом шаблоне должен box-sizing: webkit префиксер давать. Что может быть не так, подскажите, плиз
Посмотрите настройки автопрефиксера. Поставьте больше старых браузеров. Попробуйте с другими свойствами. Например с display: grid;
Спасибо за урок!
Я не совсем могу понять в чем разница между папками build и docs?
Заранее спасибо за ответ.
Папка build собирается в процессе разработки. В таске build мы не используем оптимизацию изображений и сжатие / оптимизацию CSS - для более быстрой работы сборки. docs - сжатая версия для загрузки на хостинг (сжатые картинки, оптимизированный и минифицированный код).
Галп сам сжимает?Даже если мы закинем в проект картинки по 100мб, то он из превратит в 50килобайт к примеру?
@@nelson.gold_cat 100 мб возможно сожмет до 50 Мб. Сжимает не gulp, а пакет imagemin который мы используем в сборке
@@WebCademy понял. Спасибо.
Да, напишу благодарность Юрию, раз есть возможность за курсы)
почему не на es6 и импортах?
Спасибо огромное за труд! Подскажите, где искать проблему - не грузятся картинки в проект. Добавляю Имедж или свг а в Нетворке 404.
Разобрался?
@@K0mariki Уже и не помню, давненько этот проект делал. Вроде да.