Подробная инструкция по созданию своей сборки на Gulp 4. Необходимый минимум для комфортной верстки
HTML-код
- Опубликовано: 27 июн 2024
- Что такое Gulp? Это таск менеджер для выполнения часто используемых задач. Преобразование pug в html, scss в css, typescript в javascript. Оптимизация картинок. Создание спрайтов на лету. Минификация файлов и многое другое. Все то, что вы делали когда-то вручную теперь будет сделано за вас!
В данном видео мы с вами научимся создавать любую сборку на gulp 4. Подключать любые плагину и работать с gulp4 на все 100 процентов.
NodeJS - nodejs.org/en/
Gulp - gulpjs.com/
NPM - www.npmjs.com/
SVG спрайты glivera-team.github.io/svg/201...
Марафон LoftSchool
Сайт loftschool.com/marathons/welc...
Записаться t.me/joinchat/nW6Oqyg3IM0yNDNi
Содержание:
00:00 - Вступление
04:05 - npm init
04:46 - Создание package.json
06:50 - Первый таск
09:20 - Пишем задачу pug2html
10:38 - Первый запуск Gulp
17:20 - Мини курс по pug
27:25 - Пишем обработку стилей
47:20 - Работа с JavaScript
55:50 - BrowserSync
01:10:15 - Минификация картинок
01:18:55 - SVG спрайты
01:30:40 - Подключаем normalize.css
01:35:30 - Обработка шрифтов
01:41:40 - Подключене библиотек к сборке
01:54:10 - Dev и build сборка
01:59:10 - Спасибо!
-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта #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
-----------------------------------------------------------------------------------
✅ ВК - frontcoder
✅ Telegram - t.me/frontcoderchannel
✅ Чат Telegram - t.me/frontcoder
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
![mgk - Sun to Me (Zach Bryan Cover) [Live from Cheshire Cottage]](http://i.ytimg.com/vi/_ZnbTEs4O6U/mqdefault.jpg)
Привет, круто когда все в реальном времени, а не за кадром что-то, где-то нашел, и оно все заработало волшебным образом. РЕСПЕКТ!!
Хорошее начало) Спасибо! С возвращением)
Спасибо за ваш комментарий. Рад, что вам понравилось!
Уже после такого видео не должно остаться вопросов) Хороший формат)
Спасибо за ваш комментарий. Рад, что вам понравилось!
Очень хорошее видео. Именно то, что нужно для НАЧИНАЮЩЕГО. Скорость изложения не главный фактор, главное доступность понимания. На мой взгляд одна из лучших инструкций по сборке Gulpа. И сама сборка достойна внимания: вместе с простотой сочетается возможность для модификации под свои потребности. Автору огромное спасибо и успехов во всем.
Рад, что вам понравилось!
Спасибо большое за видео! Как новичку, удалось за полдня собрать свою сборку
Отлично постарался, спасибо))
Отличное видео, пересмотрел много видосов у вас самый лучший, потому что всё получилось и заработало) А не получалось потому что теперь sass чуть по другому надо устанавливать, это я уже сам нашел и разобрался)
отличное видео! хотелось бы посмотреть дополнение по изменениям Gulp5.
Может по времени и дольше но за счет поиска и решений проблем , больше узнаешь, это лично для меня. Спасибо большое, надеюсь вы продолжите выпускать новые видео.
Я вернулся)
@@FrontcoderОтлично 👍
Формат очень интересный, мне понравился - большое спасибо. Единственное, чего мне не хватило, так это плагина webp, но я надеюсь, используя Вашу методологию добавить этот плагин в сборку.
36:45 Можно еще минифицировать тем же gulp-sass плагином, записав как:
.pipe(sass({ outputStyle: "compressed" }))
55:30 Лучше когда сам гуглишь, не зная наперед решение
Может уже поздно, но напишу для статистики мнений.
С одной стороны - живая запись с поисками и решением каких-то задач, ошибок очень хорошо показывает работу с галпом, так как его настраивают не очень часто, и получается наглядная демонстрация этого процесса от человека с опытом немаленьким. При этом сама запись ролика не будет занимать слишком много времени)
С другой - растягивается хронометраж. Но чтобы было всё чётко, ровно, по полочкам, придётся заранее довольно немало времени потрать до записи.
На самом деле мне и тот и тот вариант просмотра нравится.
Но если взять, например, одного очень популярного человека, который всё делает чётко, без лишних слов, по порядку и с минимально необходимыми объяснениями, то он делает всё слишком быстро и сжато. Лично мне трудно его смотреть и усваивать его информацию (а иногда вообще мало понятно бывает). Но при этом есть плюс - когда пересматриваешь видео для решения какого-то момента, быстрее находится искомый пункт с объяснением (хоть и коротким).
Я бы сделал нечто среднее. Или можно было бы просто перед заливкой вырезать излишне затянувшиеся куски... Обучение кого-то -- довольно непростой процесс)
И ещё один момент: как уже писали в комментариях тут, после просмотра видео в текущем формате остаётся значительно меньше вопросов, лучше доходит смысл, заносится в память)
Так что в итоге, видимо, данный формат лучше подходит для усвоения информации)
Привет, подскажи пожалуйста как в pug можно вставить картинку внутри кнопки? Можно ли обойтись без background image? Спасибо
также как и в обычные места
А не подскажите, случайно, почему иконки svg не отражаются? SVG - sprite отработал без ошибок, в html иконка присуствует, но на странице не видна?.
Иконки отображаются только когда страница загружена на сервер, или через сервер во время разработки
@@Frontcoder , спасибо!
Вопрос на засыпку. Каким образом у нас применился шрифт, если мы не импортировали fonts.scss в styles.scss?! На 1:41 ясно видно, что не подключено
Отличное замечание) Шрифт подключился, т.к. сохранен у меня на компьютере локально. У тех, у кого шрифта нет, не увидят изменения.
@@Frontcoder Я час жизни убил, пока не врубился в чём дело, не меняется шрифт, хоть убей)
Здравствуйте! Обновился плагин gulp-imagemin 8.0.0 требующий импорт в gulp4; подключение const imagemin = require('gulp-imagemin'); выдает ошибку. Сможете найти решение? погуглив, я решения не нашел
Нужно установить версию gulp-imagemin 7.0.1 через npm команду не помню ну можно найти в интернете.
@@eldarkalachikov9261 спасибо, так и сделал, всё работает.
не срабатывают стили при browsersync,
У меня проблемы с gulp-imagemin. Несколько раз переписывал как у вас все равно ошибка.
На форумах пишут что это из за новой версии 8.0.0которая вышла 2 месяца назад. У меня есть уже сборка, там тоже используется gulp-imagemin но версия пакета 7.0.1,
подключен так-же , но он отрабатывает хорошо.
Подскажите пожалуйста в чем проблема?
gulp-imagemin установить версию 7.1.0 все заработает. Огромное спасибо автору за такой труд. Мне такой формат видео больше заходит.
@@eldarkalachikov9261 подcкажи как установить определенную версию imagemin?
Всё, разобрался, вот так: npm i gulp-imagemin@7.1.0
Сервер падает, плагин plumber не отлавливает ошибки
Одно не подготовленное на несколько подготовленных. Тут не стоит себя ограничивать чем-то одним)
gulp-ttf2woff и gulp-ttf2woff2
Не подготовился них@я 😏
Ехидничать может каждый. Сделай лучше. Тогда говори.