Gulp сборка - полная инструкция. HTML, SCSS, JS, webpack, babel, webp, сжатие графики, автопрефиксы
HTML-код
- Опубликовано: 1 июн 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 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 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
У вас всегда супер полезные уроки, спасибо
Наконец закончила просмотр урока и собрала свою сборку. Вроде все нормально работает. Теперь буду постепенно внедрять в работу. Спасибо большое, Юрий, за супер-полезный стрим!
Спасибо за урок, было бы здорово сделать стрим и сверстать что-то на этой сборке ) Я думаю будет всем интересно )
огромная благодарность за данный материал. все очень структурированно и понятно
ура я смог окончить этот урок, конечно не за один присест)) Огромное тебе спасибо, ты просто лучший! то что ты выложил исходные фвйлы отдельное спасибо! ты очень сильно секономил время и моих мучений с ошибками. просто я 3-4 раза пытался сборку собратьь по видосам, но не получалось. а вот с тобой все вышло! а в конце еще и показал как к гиту все привязать. это просто бомба!
Очень доступное объяснение. Супер информативно, большое спасибо, Юрий!
Сборка вообще бомба, без воды только по делу, благодарю за такой труд, подача на высоте!
Ув. автор, спасибо за доходчивое объяснение gulp(a)🥤 для новичков и за актуальную сборку, выполненную на commonjs.
Спасибо за работу!
Приятный мужчина, спасибо за комфортную подачу, контент и сборку, обязательно воспользуюсь ей как основой для своей сборки)
Огромное спасибо за ваш труд, к сожалению на курс "JS Frontend разработчик" не смогу попасть ,но следующий точно не пропущу))
Лучшее объяснение и практика. Огромное спасибо за ваш труд! В другом месте смотрел, не понял. У вас все понятно)
Хороший урок и мастер класс. Юра ты лучший. И онлайн-школа Webcademy топ.
Спасибо огромное за ваш труд.Очень полезный курс по Gulp,однозначно лайки и подписка 😉😉
Большое вам спасибо Юрий за ваш труд!! Определенно куплю ваши курсы в ближайшем будущем. Все четко и по делу без лишней воды и замысловатых фраз, а главное доходчиво.
Юрий, огромное спасибо за этот видео урок! Вы очень хороший учитель, объясняет все очень просто и понятно. 👍👍👍
Спасибо, очень понятно и интересно😊
Юрий, Вы не раз, открывали секреты кладовой вашего профессионального мастерства, но этим магистральным мастер-классом ошеломили меня.
Пусть никогда не иссякнет доброта и мудрость в учительском сердце!
Отлично, то что надо. Помню давно проходил курсы по верстке, так там так коряво объясняли что такое gulp и как его настраивать, у вас совсем другое дело. Спасибо за такой урок и отдельно за таймкоды.
Спасибо чувак за то что ты делаешь, респект тебе и здоровья конечно)))
Спасибо! Очень полезный урок. Я много новых пакетов узнал )) Я значительно расширил свою сборку благодаря этому уроку. Хотя у меня сборка основана на pug и sass. Большое спасибо! Подписываюсь на канал, буду ждать новых отличных уроков.
@ВебКадеми - веб-разработка, программирование и IT, спасибо тебе Юр за супер урок и сборку. Все работает, но мелки моменты такие как например, работа с webp форматом и типом файла png точнее. В остальном все здорово. Все работает. Продолжу закреплять знания Gulp. И продолжать развиваться в веб-разработке. И желаю удачи тебе и твоей школе. И буду ждать новых мастер-классов и новых стримов , уроков. 👍👍👍
Спасибо большое Юрий!
Отличный урок автор все продумал, объяснил без лишней воды, просто мега респект.
Спасибо
Юрий, ты тигр братан!
Спасибо очень большое за Gulp, понятное объяснение! Рекомендую! (52:22)
Супер сборка, спасибо!
Всем здравствия.
В интернете есть много информации о различных web-инструментах. В частности, её много и о сборщике gulp. Однако, именно благодаря этому видео я собрал свой первый мини-проект с gulp.
Спасибо! Лайк, подписка.
Огонь! Много полезных фишек
Big thanks, bro! Your zip helped a lot.
Урок просто топ. Юрий - профессионал.
Крутое видео,все понятно
Лучший. Очень доволен сборкой. Многое понял из того что долго не мог усвоить
Один из лучших каналов по разработке
Спасибо, Юрий. Большую работу проделали.
Кстати, с помощью require там уже много чего не устанавливается. В документации уже по-другому. Только если версии из видео устанавливать.
искал серебро, а нашёл золото!! это точно оно! этот канал и это видео золото!
Ценнейший материал!!!!
Юрий, это просто МОЩЬ! Огромное спасибо за сборку и подробнейшее объяснение!
Лучшее объяснение работы с gulp !
У кого возникли проблемы с плагином "gulp-changed" устанавливайте версию "gulp-changed": "^4.0.3", последняя которая поддерживает require, новые только с импортами, смешивать импорты и require не получится, хоть вроде есть какие то способы, но я так и не понял как ) так что более старая версия в помощь, да если кто знает как сочетать require и импорт в одном файле буду признателен!
Спасибо помог, а как насчет gulp-autoprefixer? там теперь тоже иморты
Тоже ломаю голову над этим
✌Спасибо за урок! Можно обойтись без if() 44:55, в консоле есть совет, использовать опцию allowEmpty. Тогда в нашем случае строка 9 будет выглядеть следующим образом return gulp.src('./dist/', { read: false, allowEmpty: true }).pipe(clean());
честно! я не могу описать словами как ты сильно помог в моем начинании познания галпа, у многих информация обрывочная, либо нне работает, либо они исходные файлы не публикуют, А тебе огромное спасибо за публикациюб исходников, причем рабочих! я просто скачал, установил и все рабоатет!! я столько времени тратил на то чтобы у меня хоть одна сборка полностью заработала, но все было тщетно... то ошибки, то какойто плагин не работал, то еще что-то, то оишбки... Спасибо тебе огромное за твой труд! Ты лучший!
Спасибо) Старался, сначала хотел сделать базовый вариант сборки, но потом не удержался и сделал почти ультимативный. Несмотря на то что можно еще докрутить и добавить пару плагинов - результатом более чем доволен. Ну и код конечно для подписчиков, чтобы можно было нормально пользоваться) Удачи в веб-разработке!)
@@WebCademy огромное спасибо за то что выложил исходники сборки, уже который раз она экономит время, так как по не знанию и отсутсвие опыта я порой не могу найти где я написал ошибку, даже при наличии исходника я ее не могу найти((. но вот схходлник все быстро исправляет, потому что там нет ошибки))) Спасибо огромное!
Ждал такой скринкаст
Спасибо Юрий, для сборки использовал всегда webpack, gulp юзал крайне редко, но посмотрев некоторые куски видео задумался... Если проект небольшой- необходимости в мощи webpack нет и gulp тут незаменим: простой, понятный и быстро конфигиться..
Видео отличное!
представляю как ты офигеешь, когда узнаешь, что есть Vite где вообще ничего настраивать не нужно.
@@MaDKnighT404 спасибо я в курсе vite)))
Полностью согласен с чатом, твоя сборка очень помогла. Даже я не знающий Js, понял как можно добавить некоторые плагины! В общем лайк тебе
Спасибо))
Юрий, это опять я. Напишу коммент. Вдруг у кого-то возникнет такая же проблема при работе со сборкой. Хотя, возможно, просто я невнимательно смотрел видео и где-то допустил ошибки.
Суть. При создании двух слайдеров swiper на странице перестала автоматически перезагружаться страница. В консоли появилась ошибка. Оставляешь какой-то один слайдер на странице, - все работает. Если запускать сайт в браузере не через сборку (просто открыв index.html), ошибки в консоли нет.
До этого использовал browser-sync для автоматической перезагрузки страницы, а не gulp-server-livereload, и делал много слайдеров на swiperjs на одной странице. Никаких проблем не было. Решил откатиться к какой-то старой версии gulp-server-livereload. Но как оказалось, самой последней версии, как я понял, уже семь лет. И появилось подозрение, что откат к более старой версии вряд ли решит мою проблему.
В общем, отключил gulp-server-livereload и подключил browser-sync. Проблема исчезла. Автоматическая перезагрузка страницы стала работать, ошибка в консоли исчезла.
Была еще проблема с webp. Стал абсолютить картинки, делать object-fit. В папке build не оказывалось index.html. Решил просто отключить плагин. Вернусь к webp как-нибудь потом.
Автор, ты Человечище.
Здравствуйте! Очень полезный видеоурок! Лайк поставил) Подскажите, можно ли где-то где-то посмотреть полностью инструкцию по gulp, которая была в начале видео?
Если вы про "рисованные" слайды - то нигде, это просто наброски для ролика.
Лучший!)
Огромное спасибо за видео! Я как-то пробовал самостоятельно настроить GULP, но так как я новичок, у меня ничего не вышло. Сажусь пробовать еще раз но уже с Вашим гайдом! Желаю успехов и процветания каналу и автору!
Спасибо за комментарий!) Уверен по этому уроку у вас все получится!) Очень подробно и пошагово расписал все в видео, ну и готовый код сборки можно скачать, чтобы сверить со своим.
У меня все получилось!😁
Приветствую Юрий!
А я как всегда стрим посмотреть не смог.Буду в записи смотреть.
Юрий, подскажите, можно ли создавать на этой сборке React-приложения? И если да, то что для этого нужно дополнительно установить?
Очень круто, видно автор серьезно подошел к сборке )) Огромное спасибо)) Всем добра и мира))
Gulp умер, говорили они.... 🤥
Спасибо, чувак, за науку!
Они просто не умеют его готовить.
Подписка, лайк, колокол! 🥳
Спасибо за ролик! У меня есть вопрос- стоит в сборку добавлять bootstrap? Или лучше все слайды, аккорды, крошки и т.д. добавлять отдельными скриптами? И насколько сейчас bootstrap актуален в 2023 году?
В принципе можно и прикрутить. Я бы отдельные скрипты прикрутил. Сам по себе bootstrap обновляется. Но если frontend брать - то там другие фреймворки / либы с компонентами - есть.
Здравствуйте Юрий, я сделал сборку Gulp + webpack конечно много чего я добавил. Дела даже не в этом, а в том когда я начал переделывать сборку на модуль ES6, то Javf script показал строгий режим, а при таком режим блокируется в браузере сам код JS и нужен плавен что бы его преобразовать И главное авторы которые на Ютубе показывать сборку на этом модули про плагин не слово не говорят transform-remove-strict-mode или напрямую через webpack 2. Так что я решил оставить так как есть Сделал все как у вас опять просто смысл перестраиваться это занимает время поиск решение проблемы в интернете и т.д
Respect !!!
2:06:09
Обратите внимание, gulp-autoprefixer с версии 9.0.0 теперь поддерживает только ES Modules синтаксис импортов. Чтобы использовать его через require установите 8 версию
2:16:00
Аналогично с gulp-webp
С gulp-changed тоже самое!
Отлично, но не хватает работы с svg
Подскажите, насколько хороший вариант использовать gulp вместе с vite для вёрстки многостраничного сайта с частичным использованием vue?
Не понимаю зачем там vite, если сборку JS можно делать вебпаком и он у нас уже настроен и подключен. Если хотите попробуйте вместо него использовать vite, поищите решение для него.
Здравствуйте, будет ли подобное видео про webpack? 😊
Добротный курс, не хватает переменных scss
Я хочу готовую папку build (ранее dist) задеплоить на gh-pages: использую пакет gulp-gh-pages и таск
gulp.task('deploy', function () {
return gulp.src('./dist/**/*')
.pipe(ghPages());
});
При этом у меня создается еще одна папка ./publish, в которую почему-то складываются все папки и файлы, что есть в проекте, но на ветку gh-pages собранный build не попадает (даже пыталась создать ее вручную). Подскажите, пож, на что смотреть, я уже перелопатила все интернеты, не работает
Здравствуйте, подскажите, что делать, если в папку "docs" не сохраняется css. (в папке "build" всё работает корректно)
Здравствуйте, подскажите пожалуйста, что за плагин вы используете, чтоб вам vscode выдавал такие подсказки по написанию?
👍👍👍👍👍👍
Спасибо большое за видео! Скажите пожалуйста какая комбинация клавиш нужна чтоб скопировать файл (2:00:25) і (1:59:53)?
Выберите файл в панели с файлами и Ctrl + С (копировать) Ctrl + V (вставить)
Плагину "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"
И все заработало
как возможно сюда добавить поддержку typescript?разработку ведем на ts, а транспиляция в js?
Подскажите, пожалуйста, task про формат webp для svg не будет работать? Он только на png и jpg должен влиять?
Для, для SVG он не сработает, пропустит этот формат.
почему Livereload client connected после пишет много раз в терминале ? то есть происходит конект раз 10-15
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
Здравствуйте. Спасибо большущее за сборку! Но почему то ссылочка для верстальщиков ВебКадеми не работает :(
Пофиксил t.me/+QAxmsKj2HyWfEKzz
@@WebCademyспасибо ❤
Здравствуйте! Спасибо за шикарную сборку и отличное понятное видео! Посоветуйте пожалуйста, как сюда прикрутить переход на страницу 404 с любого несуществующего адреса, если кто знает?
Юрий,еще раз здравствуйте! снова я только в другом ролике😆 У вас macOS но команды я так понимаю все для windows? потому что на macOS многие эти команды вызовут ошибку проверял недавно тк в нем просит sudo команду а так же где то видел многие используют на маке yarn. Хотелось бы услышать вас как правильно все сделать на маке. Очень бы хотелось увидеть от вас установку gulp именно на MacOS так как. это всё же несколько отличается от win сам процесс установки того де git bash. Еще сейчас есть npm 9,8,1 версия, нужно ли обновляться ? Спасибо большое за урок! И заранее спасибо за ответ! 🙏
Евгений, приветствую. Команды я проговариваю и для macOS, к слову ролик записан на маке. sudo необходимо добавлять в начале для глобальной установки пакетов, об этом упоминаю. yarn - это аналог npm, его использовать не обязательно, я его не использую. npm - можно обновить, у меня сейчас 8 стоит, все норм.
@@WebCademy большое спасибо!
Не подскажите где посмотреть полную настройку vs code автора с настройками переносов, заполнений, темами, расширениями, сниппетами и прочим ?
Подскажем) ruclips.net/video/CLZR2dn6a6c/видео.html
@@WebCademy Спасибо
Данная сборка не работает полностью, так как некоторые пакеты gulp через require больше не подключаются!
Спасибо за урок!
Я не совсем могу понять в чем разница между папками build и docs?
Заранее спасибо за ответ.
Папка build собирается в процессе разработки. В таске build мы не используем оптимизацию изображений и сжатие / оптимизацию CSS - для более быстрой работы сборки. docs - сжатая версия для загрузки на хостинг (сжатые картинки, оптимизированный и минифицированный код).
Галп сам сжимает?Даже если мы закинем в проект картинки по 100мб, то он из превратит в 50килобайт к примеру?
@@nelson.gold_cat 100 мб возможно сожмет до 50 Мб. Сжимает не gulp, а пакет imagemin который мы используем в сборке
@@WebCademy понял. Спасибо.
Да, напишу благодарность Юрию, раз есть возможность за курсы)
Добрый день, извините за тупой вопрос но как в эту сборку добавить browsersync?
Приветствую!
Вот скачал сборку с телеграма, можно ведь всё установить командой "npm i --save-dev"?
Ведь не обязательно перечислять все пакеты при установке? Оно автоматически подхватить все нужные пакеты из package.json?
Конечно, просто npm i - и сборка готова к работе. Все пакеты из package.json будут установлены.
@@WebCademy , Юрий, если сможете найти немного времени, то неплохо бы уточнить инструкцию по сборке для новичков... Например, звучали вопросы, обязательно ли "--save-dev" при первичной установке и т.п. ...
Здравствуйте, почему у меня css стили не применяються, вроде при запуске ошибок никаких не выдает а вот стили не применяються только голый 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 помогло - там ниже еще такие же проблемы - я скинул.
А если в режиме docs сообщает об ошибке при подключении шрифтов через импорт это норм? В режиме gulp ошибки нет
Проверьте синтаксис подключения. Возможно что-то не так указали.
Юрий, спасибо большое за труд! Но не описали, как добавлять в сборку .js-файлы так, чтобы их сохранить отдельно, а не пихать их содержимое в [name].bundle.js Например я хочу сохранить jquery.min.js, как мне его прописать в сборке, чтобы он из src/js/modules сохранился в build/js и docs/js?
Андрей, приветствую. Спасибо за комментарий. Насчет вашего кейса, у меня не было такой задачи, соответственно, не смотрел как такое реализовать.
Если правильно понял. То достаточно просто создать отдельный файл, подключить его непосредственно на страницу, и добавить gulp-таск который будет просто копировать нужный вам файл из src в build, а затем и в dist. Для примера с jQuery это подойдет.
у меня сочетание клавиш ctrl + C в терминале не останавливает live reload, не знаете как решить проблему? Хочу отметить что нажимаю именно в терминале, а не в других окнах. И там пишется так: PS C:\Users\mindu\Desktop\learning HTML\test-2> ^C
Категорически настаиваю на подобном мануале по Vitejs
Спасибо огромное за труд! Подскажите, где искать проблему - не грузятся картинки в проект. Добавляю Имедж или свг а в Нетворке 404.
Разобрался?
@@K0mariki Уже и не помню, давненько этот проект делал. Вроде да.
Подскажите цветовую тему VS Code у Вас и шрифт пожалуйста
Тема PaleNight, шрифт Menlo
Юрий здравствуйте, на тайм коде 1:11:40 Папка node_modules и .gitignore, у меня в терминале не работает команда git init, в ошибке пишут - Имя "git" не распознано как имя командлета, функции, файла сценария или выполняемой программы. подскажите пожалуйста что нужно сделать чтобы пофиксить
Для работы сборки git не нужен. Здесь было просто отступление в сторону. Чтобы работал git его нужно установить в систему с сайта git-scm.com/
@@WebCademy Спасибо вам большое!
Сборка мега крутая, но когда запускаю gulp docs, получаю ошибку: gulp-notify: [SCSS] Error undefined:266:8: property missing ':'
@media (max-width: var(--laptop-size)) {
padding-left: var(--container-padding);
} нельзя использовать переменнве в инициализации медиа запроса....
в папке дист появляется папка css со стилями, footer и header вместе но сами стили не применяются, точнее если запустить index.html из дист через опен сервер то все работает со стилями, если через галп сервер то стилей нет
В папке src в html-файле нужно подключить стили по этому пути
Подскажите, какую тему в vscode вы используете в этом видео?
Palenight (Mild Contrast)
Спасибо! Нашел в вашем видео про темы и настройки! На деле, цвета более яркие и контрастные, чем в видео :)@@WebCademy
@@mr-webdev Да, видео немного режет цвет.
Добрый день! Развернул вашу сборку, но почему-то не работает autoprefixer. Ошибок в консоли нет. Как минимум в стартовом шаблоне должен box-sizing: webkit префиксер давать. Что может быть не так, подскажите, плиз
Посмотрите настройки автопрефиксера. Поставьте больше старых браузеров. Попробуйте с другими свойствами. Например с display: grid;
Всем привет, подскажите, столкнулся с такой ситуацией. Юрий, используя вашу сборку была сделана для заказчика верстка сайта. Все ок, отдал заказчику папку docs, а через время заказчик попросил сверстать дополнительные компоненты и прислал свой архив с папками и файлами как было в docs, только туда вносились некоторые изменения в файлы его программистом. Как правильней добавить в сборку все эти файлы и запустить сборку, чтобы продолжить вносить изменения? Прошу прощения, если не корректно описал свой момент, может поймете и поможете) Спасибо
Сборка при работе удаляет и создает docs заново. В идеале заказчику надо было вносить правки в проекте со сборкой, в папку src и билдить docs.
А так, если вы хотите продолжить работать со сборкой на этом проекте, то вам необходимо вручную повторить внесенные изменения в папку src.
@@WebCademy спасибо огромное за фидбэк)
Спасибо за подробное видео! При билде появляется ошибка. Как ее пофиксить? "(node:12392) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated"
Добрый день. А если возникнет потребность внести изменения на сайте, то получается все время нужно заново загружать все файлы на Гитхаб или же можно командной строкой обновить файлы?
Обновляете измененные файлы. CSS и JS если вносили изменения - то обновляем все. HTML - тек которые отредактировали. Как то делать - можно и руками, можно посмотреть пакет который будет соединятся с FTP сервером от отправлять на него собранный сайт.
@@WebCademy Спасибо за ответ