GULP установка настройка и плагины в 2022. Gulp 4 полный курс

Gulp - это планировщик задач и сборщик проектов. GULP умеет обновлять браузер, собирать в один несколько HTML или PUG файлов. Также Gulp работает с CSS препроцессорами, например LESS, SASS, STYLUS и оптимизирует их. Сжимает изображения и многое другое. GULP установка настройка и плагины в 2022. Gulp 4 полный курс. В этом уроке по Gulp мы будем работать с менеджером пакетов NPM в редакторе кода VS Code, инициализировать проект с помощью Node.js и создавать конфигурационный файл package.json, установим Gulp глобально и локально, научимся устанавливать и подключать NPM плагины в наш проект. Создадим базовую версию сборки проекта на Gulp, которая позволит нам обрабатывать стили, скрипты и отслеживать изменения в этих файлах автоматически. Сборка и настройка проекта Gulp в 2022 году это минимум который должен знать любой frontend разработчик или даже верстальщик. Так же я покажу, как повторно использовать готовую сборку в своих новых проектах размещу её на GitHub и вы в любой момент сможете скачать код настроенного Gulp проекта. Мы расширим возможности нашего сборщика Gulp и добавим возможность сжимать изображения, минифицировать HTML код, так же добавим несколько полезных плагинов для работы со стилями и скриптами. Улучшим вывод информации в терминал и настроим автоматическое обновление сайта при изменении любых файлов в нашем проекте. Я покажу как настроить плагины для работы с препроцессорами Sass, Stylus, Pug и языками Type Script и Coffee Script. После подведения итогов данного курса у вас будет полное понимание как работать с Gulp, как добавить что то в эту сборку или изменить её под себя, а так же вы получите готовый код сборки финальной версии нашего планировщика задач Gulp. ▶▶ Содержание◀◀ 00:00:00 gulp что это и установка gulp 4 00:05:38 Установка Node.js 00:13:10 Инициализация проекта NPM init 00:22:41 gulp плагины и npm пакеты 00:35:34 Константа с путями 00:42:17 Обработка стилей 00:54:12 gulp watch 01:02:53 Обработка скриптов 01:12:43 Повторное использование сборки 01:25:40 gulp 4 babel, autoprefixer, sourcemaps 01:37:04 Плагин Imagemin 01:44:08 Плагин HTMLmin 01:48:17 Плагин Size 01:51:25 Gulp Newer 01:56:21 gulp 4 browsersync 02:08:27 Работа с Pug 02:13:18 Препроцессор Stylus 02:16:55 настройка gulp sass 02:20:49 Язык TypeScript 02:25:02 Компиляция CoffeeScript 02:27:53 Итоги урока по Gulp 4 Важно! Можно сначала удалить модуль del, который у вас скорей всего версии 7 и выше npm uninstall del Устанавливайте плагин del версии 6 иначе будут ошибки и придется переделывать всю сборку так как в новой версии требуется новый синтаксис импорта и экспорта. npm i [email protected] -D ▶▶ Функционал нашей GULP сборки ◀◀ - компиляция препроцессора PUG - минификация HTML, CSS, JavaScript - компиляция препроцессоров LESS, SASS, STYLUS - автоматическое добавление префиксов CSS - транспиляция языков Type Script и Coffee Script - преобразования кода ECMAScript 2015 + в обратно совместимую версию JavaScript с - помощью Babel - объединение нескольких файлов JavaScript в один - сжатие изображений - отслеживание новых изображений, которые еще не были сжаты - отслеживание изменений в файлах и автоматический запуск повторной обработки - генерация sourcemaps - отображение размеров файлов в терминале - локальный сервер с автоматическим обновлением страницы при изменении файлов ▶▶ GULP плагины из урока ◀◀ gulp Сборщик Gulp gulp-htmlmin Минификация HTML файлов gulp-pug Pug препроцессор HTML кода gulp-less Компиляция Less файлов gulp-stylus Компиляция Styl файлов sass Компилятор Sass gulp-sass Компиляция Sass и Scss файлов gulp-uglify Сжатие и оптимизация Java Script кода gulp-coffee Преобразует Coffee Script в Java Script gulp-typescript Преобразует Type Script в Java Script typescript Язык Type Script gulp-babel Преобразует Java Script в старый стандарт @babel/coreЯдро Babel @babel/preset-env Пресет для компиляции Babel gulp-clean-css Минификация и оптимизация CSS файлов del Удаление каталогов и файлов gulp-sourcemaps Карта строк кода для инструментов разработчика gulp-autoprefixer Автоматическое добавление префиксов в CSS gulp-imagemin Сжатие изображений gulp-concat Объединение нескольких файлов в один gulp-newer Отслеживание только новых файлов gulp-rename Переименовывает файлы gulp-size Отображение информации о размерах файлов в терминале browser-sync Автоматическое обновление сайта при изменении файлов Готовая сборка Gulp 4: https://github.com/morphIsmail/testGulpBuild ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor 💡 Telegram канал - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/387773773/teach 💰 Донаты на ЮMoney - https://sobe.ru/na/itdoctor ВКонтакте - https://vk.com/itdoctorstudio Яндекс Дзен - https://zen.yandex.ru/itdoctor Rutube - https://rutube.ru/channel/23500045/ #gulp4 #gulp #gulpbuild #itdoctor