GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp? Самостоятельно конвертирует и подключает шрифты, а также записывает подключение в файл стилей. Обновляет браузер. Собирает в один несколько HTML\PUG файлов. Работает с CSS препроцессорами, например SASS(SCSS) и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов с помощью WEBPACK, оптимизирует и сжимает их. Есть возможность работать в синтаксисе ES6. Умеет создавать SVG спрайты, создавать ZIP архив с результатом, Отправлять готовую верстку на FTP сервер и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! Если возникает ошибка: "[HTML] Error: Callback called multiple times"... Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов. Оновився плагін, зараз треба писати import deleteAsync from "del"; Скачать готовую сборку (патреон, любой уровень):
Спасибо за поддержку бесплатного обучающего контента! Функция определения WEBP
Плагины от зрителей: gulp-cache, gulp-sharp-responsive Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц:
Набор на курс по верстке:
БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
Настройка редактора VS CODE: https://www.youtube.com/watch?v=nxCLXMBl4e4
Карта канала:
Получить доступ к плюшкам + поддержать канал:
Курс по верстке:
Telegram канал:
(
Telegram чат по верстке:
(
Facebook: https://www.facebook.com/freelancerlifestyle
Instagram: https://www.instagram.com/freelancer.lifestyle
00:00:00 - Что умеет Gulp? 00:00:40 - Подготовка к работе. NodeJS, GIT Bush 00:03:16 - Создание Package.json. Включаем ES6 модули. 00:04:58 - Установка GULP. Глобально и в проект 00:06:42 - Структура файлов и папок. Архитектура сборки 00:10:23 - Копирование файлов 00:16:45 - Настройка наблюдателя (watch) 00:20:31 - Очистка папки с результатом 00:22:51 - Обработка HTML/PUG файлов 00:46:09 - Локальный сервер. Автообновление страницы. 00:49:59 - Обработка SASS/SCSS/CSS файлов 01:03:14 - Обработка JavaScript файлов. WEBPACK 01:10:15 - Оптимизация картинок. Создание WEBP 01:17:36 - Конвертация шрифтов. Запись в файл стилей. 01:25:49 - Создание SVG спрайтов. 01:30:37 - Режимы разработчика (dev) и продакшн (build) 01:37:03 - Создание ZIP архива с результатом 01:39:47 - Выгрузка результата на сервер по FTP 01:44:20 - Использование Gulp сборки для нового проекта 01:46:21 - Заключение @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - https://www.youtube.com/channel/UCJNVBfLijFSa_tBcrNZKZag
@СЛУШАЙ! Канал с интересными историями из жизни. Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
#обучение #gulp #фрилансерпожизни Живи, а работай в свободное время! ©