Gulp 4 сборка для верстки сайтов. Gulp 4 + Pug + SCSS + BrowserSync + Linters
HTML-код
- Опубликовано: 29 мар 2020
- Всем привет. В данном видео я расскажу вам о своей новой сборке Gulp 4.
Сборка - github.com/FARCER/gulp4-for-f...
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта #10. PSD 2 HTML . Верстка сайта по продаже строительных материалов - bit.ly/2kIF3Ov
Chrome DevTools - bit.ly/33IfApM
Учим программирование через игры - bit.ly/2CEGkvq
Верстка интернет - магазина - bit.ly/2CvE75h
Собери свою сборку на gulp4 - bit.ly/32IwCTa
Секреты Frontend Разработчика - bit.ly/2X7a3X6
Практикум JavaScript - bit.ly/2DPk3LK
Основы JavaScript - bit.ly/2Rr7rT4
Не ограничивай себя видеоуроками на RUclips!
Узнавайте еще больше полезной информации!
👍👍👍Telegram-чат: t.me/frontcoder
Telegram-канал: t.me/frontcoderchannel
VK: frontcoder
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
Спасибо тебе большое! Очень помогло в работе)
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Спасибо что меня услышал!)
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Урааа!! Спасибо, что без всех этих долларов. Вот так выглядит всё намного лучше. Красота)))
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Я давно ждал обновленного пака
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
спасибо большое!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Анатолий, добрый день. Спасибо за ваши видео. Подскажите, а как можно подключить svg спрайт заранее, чтобы он весь загрузился, а потом ссылаться на него в html? Есть какой-то способ с object и use, насколько я понимаю, но не могу найти доступно инфу по этому вопросу. Как вы решаете такую задачу? Заранее благодарю.
Классный урок! А вот такой вопрос
Дали сайт на доработку.
Есть только HTML, CSS, JS файлы.
Если я хочу работать со сборщиком GULP, хочу использовать в работе SASS и PUG, то как это проще сделать? Т.е. надо переконвертировать существующий сайт в PUG SASS. Использовать онлайн конвертер из HTML в PUG и из CSS в SASS? Или плагины какие-нибудь есть...
Анатолий, я как понимаю твоя новая сборка поддерживает формат изображений Webp.
все агонЬ ) в паге при большом количестве файлов длительность компиляции так же увеличивается как и в прошлых сборках ? или решил эту проблему ?)
судя по содержимому никак не решил)
Пока не проверял на больших проектах
Здравствуйте Анатолий.
Привет
Столкнулся с багом при создании svg спрайтов. Для них не генерируется миксин в sprites.scss и соответственно не компилируется ничего.
И еще browsersync часто выдает (buffered events), страница перезагружается, но ничего не обновляется. Что делать?(
Привет, а у тебя есть уроки по уже новому шаблону?
Пока что нет
Может кто объяснить как работают шрифты в этой сброке? Я так и не понял..
Доброго времени суток. А зачем два пакета sass в сборке: gulp-sass и node-sass? Тем более, что node-sass в тасках нигде не используется, а в package.json прописан? И еще вопрос: зачем png-спрайт в 2020 году?
node-sass нужен для компиляции самого scss файла, а gulp-sass это типа прослойка межлу gulp и node-sass. И еще, node-sass используется и отдельно и с webpack и т.д.
А можно как-то самому внести изменения в этот шаблон, чтобы вместо SCSS использовать Stylus?
да, замените scss на stylus
Почему если открыть файл index.html из папки dist, то не отображаются файлы svg? В предыдущей сборке тоже было также.
Это ограничение браузеров.
Подскажите плиз, как на prod сделать, чтобы не минифицировало html ?
Для чего? Если хочешь увидеть обычный html, нажми shift + alt + f. И будет тебе не в 1 строку.
Слушайте а как иконки эти красить? Ну например нужно по ховеру цвет менять. Я просто икомуном генерю.
Если svg иконки, то они красятся через fill
Добрый день. Меняете fill
Почему когда я прописываю npm i , у меня держится 0% и всё??
не сталкивался с таким. Попробуйте поискать решение в гугле
Здравствуйте!
Отличная сборка - скажите пож - как сделать чтоб работало без шаблонизатора pug?
П.С. А то когда вставляеш чистй html код , оно ругается на пробел и табыы , да и сам код получается без отступов.
попробуйте преобразовывать html в pug, для Visual Studio Code, сущетсвуют плагин html2pug
marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug
@@fortsite а как это сделать?
Установил Visual Studio Code и для него плагин html2pug - как теперь?
Покажешь как верстаешь на новом шаблоне?:з
Будет чуть позже обязательно
@@Frontcoder я бы тоже глянул
@@Frontcoder хотелось бы увидеть как медиа запросы юзаешь)
У меня jQuery не подключается пишется note found
Проверьте пути и наличие файла
кто пробовал сборку на крупных проектах? Как она?
идеальна
а я уже перешёл на codepen.io, там появились проекты и есть pug )
поподробнее пожалуйста
11.50 НЕ ВЗДУМАЙ УДАЛЯТЬ КОММЕНТАРИИ!!!!)) МЫ ИХ САМИ УДАЛИМ) БЕЗ НИХ ОСВОЕНИЕ СБОРКИ ЗАЙМЕТ ДОЛЬШЕ ВРЕМЕНИ)
Самое главное не объяснил. Как теперь писать в js.