Подробная инструкция по созданию своей сборки на Gulp 4. Необходимый минимум для комфортной верстки

Что такое Gulp? Это таск менеджер для выполнения часто используемых задач. Преобразование pug в html, scss в css, typescript в javascript. Оптимизация картинок. Создание спрайтов на лету. Минификация файлов и многое другое. Все то, что вы делали когда-то вручную теперь будет сделано за вас!
В данном видео мы с вами научимся создавать любую сборку на gulp 4. Подключать любые плагину и работать с gulp4 на все 100 процентов.

Марафон LoftSchool

Содержание:
00:00 - Вступление
04:05 - npm init
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:35:30 - Обработка шрифтов
01:41:40 - Подключене библиотек к сборке
01:54:10 - Dev и build сборка
01:59:10 - Спасибо!

-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны

-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

[yuriypanchenko]

Привет, круто когда все в реальном времени, а не за кадром что-то, где-то нашел, и оно все заработало волшебным образом. РЕСПЕКТ!!

[kgfztzb]

Хорошее начало) Спасибо! С возвращением)

[wqposii]

Очень хорошее видео. Именно то, что нужно для НАЧИНАЮЩЕГО. Скорость изложения не главный фактор, главное доступность понимания. На мой взгляд одна из лучших инструкций по сборке Gulpа. И сама сборка достойна внимания: вместе с простотой сочетается возможность для модификации под свои потребности. Автору огромное спасибо и успехов во всем.

[kpaok]

Уже после такого видео не должно остаться вопросов) Хороший формат)

[svitalii]

Спасибо большое за видео! Как новичку, удалось за полдня собрать свою сборку

[woodenproduction]

Отличное видео, пересмотрел много видосов у вас самый лучший, потому что всё получилось и заработало) А не получалось потому что теперь sass чуть по другому надо устанавливать, это я уже сам нашел и разобрался)

[powered]

Может по времени и дольше но за счет поиска и решений проблем, больше узнаешь, это лично для меня. Спасибо большое, надеюсь вы продолжите выпускать новые видео.

[vgnnblu]

отличное видео! хотелось бы посмотреть дополнение по изменениям Gulp5.

[txymiqu]

Формат очень интересный, мне понравился - большое спасибо. Единственное, чего мне не хватило, так это плагина webp, но я надеюсь, используя Вашу методологию добавить этот плагин в сборку.

[johnconnor]

36:45 Можно еще минифицировать тем же gulp-sass плагином, записав как:
.pipe(sass({ outputStyle: "compressed" }))

[Anodoree]

Может уже поздно, но напишу для статистики мнений.
С одной стороны - живая запись с поисками и решением каких-то задач, ошибок очень хорошо показывает работу с галпом, так как его настраивают не очень часто, и получается наглядная демонстрация этого процесса от человека с опытом немаленьким. При этом сама запись ролика не будет занимать слишком много времени)
С другой - растягивается хронометраж. Но чтобы было всё чётко, ровно, по полочкам, придётся заранее довольно немало времени потрать до записи.
На самом деле мне и тот и тот вариант просмотра нравится.
Но если взять, например, одного очень популярного человека, который всё делает чётко, без лишних слов, по порядку и с минимально необходимыми объяснениями, то он делает всё слишком быстро и сжато. Лично мне трудно его смотреть и усваивать его информацию (а иногда вообще мало понятно бывает). Но при этом есть плюс - когда пересматриваешь видео для решения какого-то момента, быстрее находится искомый пункт с объяснением (хоть и коротким).
Я бы сделал нечто среднее. Или можно было бы просто перед заливкой вырезать излишне затянувшиеся куски... Обучение кого-то -- довольно непростой процесс)
И ещё один момент: как уже писали в комментариях тут, после просмотра видео в текущем формате остаётся значительно меньше вопросов, лучше доходит смысл, заносится в память)
Так что в итоге, видимо, данный формат лучше подходит для усвоения информации)

[johnconnor]

55:30 Лучше когда сам гуглишь, не зная наперед решение

[txymiqu]

Здравствуйте! Обновился плагин gulp-imagemin 8.0.0 требующий импорт в gulp4; подключение const imagemin = require('gulp-imagemin'); выдает ошибку. Сможете найти решение? погуглив, я решения не нашел

[findqln]

Привет, подскажи пожалуйста как в pug можно вставить картинку внутри кнопки? Можно ли обойтись без background image? Спасибо

[eldarkalachikov]

У меня проблемы с gulp-imagemin. Несколько раз переписывал как у вас все равно ошибка.
На форумах пишут что это из за новой версии 8.0.0которая вышла 2 месяца назад. У меня есть уже сборка, там тоже используется gulp-imagemin но версия пакета 7.0.1,
подключен так-же, но он отрабатывает хорошо.
Подскажите пожалуйста в чем проблема?

[sergeyshatokhin]

Вопрос на засыпку. Каким образом у нас применился шрифт, если мы не импортировали fonts.scss в styles.scss?! На 1:41 ясно видно, что не подключено

[sDevilinme]

не срабатывают стили при browsersync,

[ojlzwdi]

А не подскажите, случайно, почему иконки svg не отражаются? SVG - sprite отработал без ошибок, в html иконка присуствует, но на странице не видна?.

[PrikolovPomjka]

Сервер падает, плагин plumber не отлавливает ошибки

[viktorm]

Одно не подготовленное на несколько подготовленных. Тут не стоит себя ограничивать чем-то одним)