Спасибо за дополнение к предыдущему уроку. Желаю вам продвижения канала. Среди всего того контента по веб разработке что я просмотрел на ютубе за последние полтора года, считаю ваши уроки лучшими. Однозначно заслуживаете большей аудитории!
Здравствуйте, такой вопрос. В разделе про контейнеры, размеры переменной указаны в px, соответственно, нестандартные контейнеры рассчитываются от этого числа. А как сделать нестандартные контейнеры так, чтобы они рассчитывались в единице измерения rem, если я в переменную передаю число без каких либо единиц измерения. Прям голову ломаю сижу.
Очень крутая сборка! Единственное при вводе команда "gulp docs" выдает ошибку. Можете подсказать как исправить? 'images:docs' errored after 399 ms [19:41:56] Error: EINVAL: invalid argument, mkdir
Юрий здравствуйте, gulp-changed и в принципе некие другие пакеты получившие обновления за последние 4 месяца на npmjs больше не используют метод require() а импортятся, как использовать новый подход?
Здравствуйте. Перепишите все подключения на import, те пакеты что не заработают - либо обновите, либо найдите альтернативные, чтобы работали на import. Проверьте что все работает.
Я правильно понял, что для всех картинок теперь обязательно два варианта: 1х и 2х? я попробовал просто подключить картинку с одним форматом 1x, но какая-то библиотека создающая picture создала конечно srcset под webp x2, затем браузер посмотрев на мой 3k экран естесственно отдал приоритет ретине х2, а тут бамс, такой картинки нету)) Можно ли как-то вставлять картинки чтоб к ним не применялся picture?
Классная сборка только не подскажете где можно почитать про автодополнение путей Решение от подписчика Max Voron. Не получается добиться корректной работы если добавляешь в папку HTML другую папку с файлом HTML и в файле ставишь ссылку на CSS
ТА Здравствуйте. Там сделана замена путей через регулярные выражения. Возможно для CSS надо настроить отдельно. Базово CSS подключается в основном файле и работает нормально.
Спасибо огромное за ваш труд! И сборка, и видео очень крутые, понятные даже для новичков. Хотела узнать, пользуетесь ли вы critical css для оптимизации и можно ли его как-то подключить к этой сборке?
Ребята спасайте, пользуюсь этой сборкой, всё класс, но тут возникла необходимость подключить библиотеку animate.css но она ни в какую не хочет работать. Импортировал по разному, устанавливал через npm, дошло до того, что просто скачал всю либу и импортировал её в main.scss. В DevTools вижу что она подключена, классы все есть, но анимации не работают, не могу понять в чем дело, помогите)
На видео не полностью виден код для gulp-replace в scss:dev и html:dev,который переписывает пути. Может,пожалуйста, скинуть, если у кого-то есть. Буду очень благодарен
@@WebCademy Здравствуйте, не подскажете как можно решить ошибку. Я разархивировал архив со сборкой, добавил его в vs code и у меня выдаётся ошибка : "Файл не отображается в текстовом редакторе, так как является двоичным или использует неподдерживаемую кодировку текста.". Я с такой раньше не встречался, не подскажете в может быть проблема, может я архив как-то не так разархивирую, хотя вроде бы обычно.
В первом видео показывал. Также на канале есть два стрима в которых мы верстали на Сборке. 1) ruclips.net/video/mgKMgE3lviI/видео.html&ab_channel=%D0%92%D0%B5%D0%B1%D0%9A%D0%B0%D0%B4%D0%B5%D0%BC%D0%B8%7C%D0%AE%D1%80%D0%B8%D0%B9%D0%9A%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%81%D0%BA%D0%B8%D0%B9 2) ruclips.net/video/fg0lm8kOUWQ/видео.html&ab_channel=%D0%92%D0%B5%D0%B1%D0%9A%D0%B0%D0%B4%D0%B5%D0%BC%D0%B8%7C%D0%AE%D1%80%D0%B8%D0%B9%D0%9A%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%81%D0%BA%D0%B8%D0%B9
Объясните новичку, для чего мне к примеру в своем пет проекте на реакте устанавливать сборщик вебпак или галп? Все ведь и так работает, и файлы организовал как обычно по compontents, pages и тд.
Если мне нужно, чтобы была страничка, к ней подключены другие блоки html, а к ним ещё другие блоки html и именно в такой иерархии. И их много. Мне всё совать в папку blocks?
@@WebCademy здравствуйте юрий) так я ее как раз и пробую) в ней у меня эта проблема, сборка как будто просто пропускает плагин gulp-webp-retina-html. проблема в тои что терминал даже ошибку не выдает, как быдто все так и надо... я уже проверил на сайте npm, но тщетно
@@WebCademy я уже добавил настройки checkExists: true, noWebp: false но это не помогло, думал в этом проблема... по итогу он просто не добавляет теги pictures и sourse ((
Пути переписываются таким образом, что в любом случае указывают на корень проекта, а как быть если структура проекта многоуровневая, допустим /html/catalog/example/index.html? Как сделать так, чтобы во вложенных каталогах пути прописывались в обратную сторону ../../? (ง ͠° ͟ل͜ ͡°)ง
Добрый день! Спасибо за классную сборку и множество полезных фич! Помогите, пожалуйста, решить ошибку в плагине imagemin: Message: The system cannot find the path specified. Details: errno: ENOENT syscall: spawn C:\Users\.... ode_modules\cwebp-bin\vendor\cwebp.exe Я попробовал переустановить модуль gulp-imagemin@7.1.0, или установить cwebp-bin, ибо в модуях действительно нет папки vendor, но всё закончилось ошибками
У вас проблема с готовой сборкой из архива, или при установке плагина самостоятельно? Если ставите его сами, то возможно устанавливаете другую версию (по умолчанию самая последняя) и в ней могут быть другие настройки для использования. Рекомендую взять готовую сборку из нашего Telegram канала.
Отличная сборка. Однако у мня возникла ошибка в работе таска images:docs : Error: EINVAL: invalid argument, mkdir 'D:\Projects\gulp-start-2\.webpD:\Projects\gulp-start-2\src\img' помогите решить)
@@НиколайТитов-ч5п подскажите новичку, почему вообще возникла такая ошибка? есть разница между тем чтобы указать любой файл и любой файл с любым расширением? И как вы поняли, что проблема в этом?
Как расказанное в этом часовом видео связано с "Gulp сборка для верстки сайтов."? "Ускоряем процесс верстки сайтов", согласен, процесс верстки ускоряется на чуть чуть, но при чем тут Gulp? За 55 минут лишь единожды сказано про Gulp - автоматическое создание файла для подключения шрифтов...
В начале видео автор говорит о том что это дополнение к предыдущему уроку и само видео является обзором на то как предыдущая сборка была доработана и о том как ей пользоваться.
@@beegoodb1213 так это не доработка сборки, это обычная работа с предпроцессором SASS\SCSS. К сборке это ни как не относится=) А в названии ролика на первом месте "Gulp сборка для верстки сайтов". Представляю анархию если бы в составе колбасы, на первом месте писали бы вода, крахмал, а мясо на последнем. Не знаю как остальные, но я привык читать состав и описание чего либо, когда всё идёт по убыванию. Ведь в ролике про Gulp реально не больше 2 минут из 55...
Как насчет svg спрайтов? Сжатие графики при продакшн сборке. Ну и в целом использование gulp-file-include и scss. Также ускорение идет за счет миксинов и сниппетов, и готовых классов, которые добавлены в данный стартовый шаблон. Это продолжение, есть первый ролик где больше тех части по настройке gulp.
Привет! Кто знает? Скачивал код с телеграмма. Запустил в терминале gulp. А вот при запуске gulp docs. Подгружается только шрифты в docs\fonts. Терминал показывает такую ошибку. [16:34:05] 'images:docs' errored after 1.54 s [16:34:05] Error: EINVAL: invalid argument, mkdir 'C:\Users\василий\Documents\Мои проекты\gulp-webcademy.ru-2\.webpC:\Users\василий\Documents\Мои проекты\gulp-webcademy.ru-2\src\img' [16:34:05] 'docs' errored after 30 s x0a$
У меня было тоже самое, я установил npm пакет gulp-rename и использовал его в таске images:docs файла docs.js, вместо extRename('.webp') указав rename({extname: '.webp')
@@АлексейНикулин-в8и Спасибо! Попробую тоже так сделать. Я у него по моему другую версию GULP скачал и все пошло. Сейчас по его видео создаю сайт на основе gulp. Пока все нормально идет))
Я с наслаждением вкушаю плоды ваших экспериментов и исследований.
Я даже не знаю, каким мерилом мерить мою благодарность за ваш труд.
Спасибо за дополнение к предыдущему уроку. Желаю вам продвижения канала. Среди всего того контента по веб разработке что я просмотрел на ютубе за последние полтора года, считаю ваши уроки лучшими. Однозначно заслуживаете большей аудитории!
Сборка огонь 👍 Единственное, что подправил это перевел на импорты и добавил возможность заливать фалы на хостинг по ftp ( vinyl-ftp , gulp-util)
Добрий день ,как сделать імпорт!я видео что тут изменяется const на @import как их применить подскажете?
Отличная сборка!)
Спасибо классно получилось
Gulp-ом не когда не пользовался, но увидел видео решил понажимать и понял что не так и тяжело, Спасибо за урок.
спасибо за урок!
Здравствуйте, такой вопрос. В разделе про контейнеры, размеры переменной указаны в px, соответственно, нестандартные контейнеры рассчитываются от этого числа. А как сделать нестандартные контейнеры так, чтобы они рассчитывались в единице измерения rem, если я в переменную передаю число без каких либо единиц измерения. Прям голову ломаю сижу.
Очень крутая сборка! Единственное при вводе команда "gulp docs" выдает ошибку. Можете подсказать как исправить? 'images:docs' errored after 399 ms
[19:41:56] Error: EINVAL: invalid argument, mkdir
Поправьте ссылу на сборку под видео. Ведет на первую версию.
Юрий здравствуйте, gulp-changed и в принципе некие другие пакеты получившие обновления за последние 4 месяца на npmjs больше не используют метод require() а импортятся, как использовать новый подход?
Здравствуйте. Перепишите все подключения на import, те пакеты что не заработают - либо обновите, либо найдите альтернативные, чтобы работали на import. Проверьте что все работает.
Как быть если в SVG 3 элемента с разными цветами. Обводка одним, фон вторым, содержимое третьим. Обращение через класс у path не работает.
Доброго времени суток. В сборке папка docs переносится из папки src при работе со сборкой и в готовый проект (в папки build и docs)
return gulp.src(['./app/html/**/*.html', '!./app/html/blocks/*.html', '!./app/html/docs/*.html'])
@@НиколайТитов-ч5п для меня это не проблема, а вот остальные могут быть неприятно удивлены
а как в данном конфиге импортить стили из node_modules, если, к примеру, установить зависимость, которая в себе несет стили для компонента?
Импортить в JS либо в SCSS, указывая путь к файлу.
Я правильно понял, что для всех картинок теперь обязательно два варианта: 1х и 2х? я попробовал просто подключить картинку с одним форматом 1x, но какая-то библиотека создающая picture создала конечно srcset под webp x2, затем браузер посмотрев на мой 3k экран естесственно отдал приоритет ретине х2, а тут бамс, такой картинки нету)) Можно ли как-то вставлять картинки чтоб к ним не применялся picture?
Обязательно сохранять в 1 и 2x. Это нормально для современной верстки. Либо перенастроить сборку, конфиги или другие пакеты.
@@WebCademy спасибо за ответ!
Классная сборка только не подскажете где можно почитать про автодополнение путей Решение от подписчика Max Voron. Не получается добиться корректной работы если добавляешь в папку HTML другую папку с файлом HTML и в файле ставишь ссылку на CSS
ТА Здравствуйте. Там сделана замена путей через регулярные выражения. Возможно для CSS надо настроить отдельно. Базово CSS подключается в основном файле и работает нормально.
Спасибо огромное за ваш труд! И сборка, и видео очень крутые, понятные даже для новичков. Хотела узнать, пользуетесь ли вы critical css для оптимизации и можно ли его как-то подключить к этой сборке?
Здравствуйте. Спасибо за комментарий. Не пользуюсь. Можно поискать плагин на npm: mscharl.github.io/gulp-critical-css/
У меня такой вопрос, gulp-plumber и gulp-notify работают в html? Не могу никак спровоцировать ошибку.
Работают.
Ребята спасайте, пользуюсь этой сборкой, всё класс, но тут возникла необходимость подключить библиотеку animate.css но она ни в какую не хочет работать. Импортировал по разному, устанавливал через npm, дошло до того, что просто скачал всю либу и импортировал её в main.scss. В DevTools вижу что она подключена, классы все есть, но анимации не работают, не могу понять в чем дело, помогите)
Юрий а как очистить сборку от старых проектов
Для нового проекта заново копировать сборку, брать ее стартовый шаблон, делать npm i и разрабатывать.
Как выключить или удалить плагин в gulp?
На видео не полностью виден код для gulp-replace в scss:dev и html:dev,который переписывает пути. Может,пожалуйста, скинуть, если у кого-то есть. Буду очень благодарен
Доброго времени суток!) Код есть в нашем ТГ канале. Ссылка в описании под видео.
@@WebCademy Здравствуйте, не подскажете как можно решить ошибку. Я разархивировал архив со сборкой, добавил его в vs code и у меня выдаётся ошибка : "Файл не отображается в текстовом редакторе, так как является двоичным или использует неподдерживаемую кодировку текста.". Я с такой раньше не встречался, не подскажете в может быть проблема, может я архив как-то не так разархивирую, хотя вроде бы обычно.
@@playerjester7294 Напишите в наш чат верстальщиков, там и скриншоты можно скинуть и будет понятно в чем проблема.
Подскажите как к сборке подключать к примеру swiper?
В первом видео показывал. Также на канале есть два стрима в которых мы верстали на Сборке. 1) ruclips.net/video/mgKMgE3lviI/видео.html&ab_channel=%D0%92%D0%B5%D0%B1%D0%9A%D0%B0%D0%B4%D0%B5%D0%BC%D0%B8%7C%D0%AE%D1%80%D0%B8%D0%B9%D0%9A%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%81%D0%BA%D0%B8%D0%B9
2) ruclips.net/video/fg0lm8kOUWQ/видео.html&ab_channel=%D0%92%D0%B5%D0%B1%D0%9A%D0%B0%D0%B4%D0%B5%D0%BC%D0%B8%7C%D0%AE%D1%80%D0%B8%D0%B9%D0%9A%D0%BB%D1%8E%D1%87%D0%B5%D0%B2%D1%81%D0%BA%D0%B8%D0%B9
Зачем у ваc нужен gulp-changed в задаче sass? Он там по сути не выполняет никакой полезной функции
P.S. и в задаче js тоже
Объясните новичку, для чего мне к примеру в своем пет проекте на реакте устанавливать сборщик вебпак или галп? Все ведь и так работает, и файлы организовал как обычно по compontents, pages и тд.
Если у вас проект на React то и не нужно. У вас там своя сборка на CRA или Vite.
@@WebCademy если пет проект, то исключительно Vite, CRA больше не поддерживается
Если мне нужно, чтобы была страничка, к ней подключены другие блоки html, а к ним ещё другие блоки html и именно в такой иерархии. И их много. Мне всё совать в папку blocks?
Да, в се в папке blocks. В ней вы можете создавать другие под-папки и организовывать проект удобным для себя образом.
у меня почему-то не хочет заменять img на webm при запуске gulp docs 😐при чем не ошибок, ничего не вылетает, просто не вносит изменения в html файл
В html должна быть замена, он дописывает тег picture в html. Попробуйте последнюю 03 версию в канале.
@@WebCademy здравствуйте юрий) так я ее как раз и пробую) в ней у меня эта проблема, сборка как будто просто пропускает плагин gulp-webp-retina-html. проблема в тои что терминал даже ошибку не выдает, как быдто все так и надо... я уже проверил на сайте npm, но тщетно
@@WebCademy я уже добавил настройки
checkExists: true,
noWebp: false
но это не помогло, думал в этом проблема...
по итогу он просто не добавляет теги pictures и sourse ((
@@WebCademy при этом прописывал картинку так же тегом img как у вас ввидео, все как говорится по инструкуии не отходя в сторону
@@sad_gary вы исправили ошибку?
Пути переписываются таким образом, что в любом случае указывают на корень проекта, а как быть если структура проекта многоуровневая, допустим /html/catalog/example/index.html? Как сделать так, чтобы во вложенных каталогах пути прописывались в обратную сторону ../../? (ง ͠° ͟ل͜ ͡°)ง
Как вариант можно убрать автоисправление путей, и самостоятельно всегда указывать корректные, те пути которые нужны для каждой конкретной страницы.
@@WebCademy Спасибо! Завелось!
не могу подключить шрифт который уже woff формата
Такая же беда. Возился-возился, плюнул и скачал ttf. Все работает!
Добрый день! Спасибо за классную сборку и множество полезных фич!
Помогите, пожалуйста, решить ошибку в плагине imagemin:
Message:
The system cannot find the path specified.
Details:
errno: ENOENT
syscall: spawn C:\Users\....
ode_modules\cwebp-bin\vendor\cwebp.exe
Я попробовал переустановить модуль gulp-imagemin@7.1.0, или установить cwebp-bin, ибо в модуях действительно нет папки vendor, но всё закончилось ошибками
У вас проблема с готовой сборкой из архива, или при установке плагина самостоятельно?
Если ставите его сами, то возможно устанавливаете другую версию (по умолчанию самая последняя) и в ней могут быть другие настройки для использования.
Рекомендую взять готовую сборку из нашего Telegram канала.
Отличная сборка. Однако у мня возникла ошибка в работе таска images:docs : Error: EINVAL: invalid argument, mkdir 'D:\Projects\gulp-start-2\.webpD:\Projects\gulp-start-2\src\img'
помогите решить)
Решается просто - вместо: './src/img/**/*' , нужно писать './src/img/**/*.*'
@@НиколайТитов-ч5п подскажите новичку, почему вообще возникла такая ошибка? есть разница между тем чтобы указать любой файл и любой файл с любым расширением? И как вы поняли, что проблема в этом?
@@НиколайТитов-ч5п подскажите пожалуйста где именно это писать
@@sao4227 gulp/docs.js 123 И 134 строка
Как расказанное в этом часовом видео связано с "Gulp сборка для верстки сайтов."?
"Ускоряем процесс верстки сайтов", согласен, процесс верстки ускоряется на чуть чуть, но при чем тут Gulp?
За 55 минут лишь единожды сказано про Gulp - автоматическое создание файла для подключения шрифтов...
В начале видео автор говорит о том что это дополнение к предыдущему уроку и само видео является обзором на то как предыдущая сборка была доработана и о том как ей пользоваться.
@@beegoodb1213 так это не доработка сборки, это обычная работа с предпроцессором SASS\SCSS. К сборке это ни как не относится=) А в названии ролика на первом месте "Gulp сборка для верстки сайтов". Представляю анархию если бы в составе колбасы, на первом месте писали бы вода, крахмал, а мясо на последнем. Не знаю как остальные, но я привык читать состав и описание чего либо, когда всё идёт по убыванию. Ведь в ролике про Gulp реально не больше 2 минут из 55...
Как насчет svg спрайтов? Сжатие графики при продакшн сборке. Ну и в целом использование gulp-file-include и scss. Также ускорение идет за счет миксинов и сниппетов, и готовых классов, которые добавлены в данный стартовый шаблон.
Это продолжение, есть первый ролик где больше тех части по настройке gulp.
Такое чувство , что вы написали свой комментарий лижбы не молчать.
Привет! Кто знает? Скачивал код с телеграмма. Запустил в терминале gulp. А вот при запуске gulp docs. Подгружается только шрифты в docs\fonts. Терминал показывает такую ошибку. [16:34:05] 'images:docs' errored after 1.54 s
[16:34:05] Error: EINVAL: invalid argument, mkdir 'C:\Users\василий\Documents\Мои проекты\gulp-webcademy.ru-2\.webpC:\Users\василий\Documents\Мои проекты\gulp-webcademy.ru-2\src\img'
[16:34:05] 'docs' errored after 30 s
x0a$
У меня было тоже самое, я установил npm пакет gulp-rename и использовал его в таске images:docs файла docs.js, вместо extRename('.webp') указав rename({extname: '.webp')
@@АлексейНикулин-в8и Спасибо! Попробую тоже так сделать. Я у него по моему другую версию GULP скачал и все пошло. Сейчас по его видео создаю сайт на основе gulp. Пока все нормально идет))