Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов

Описание: Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!

🔴 ОБНОВЛЕННОЕ ВИДЕО:    • Видео  
🔴 Готовая сборка GULP из урока (патреон):   / 36724521  
Спасибо за поддержку бесплатного обучающего контента!

Уточнения.
☝️imagemin следует оставлять 7й версии!
☝️ UPD 26/06/2021 - Обновился SASS, из-за этого сборки Gulp могут не запускаться.
В package.json:
"sass": "latest"
в gulpfile.js меняем на:
scss = require('gulp-sass')(require('sass'));
а также:
scss({ outputStyle: 'expanded' }).on('error', scss.logError)
Обновил файлы шаблонов и сборок.
☝️ У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install [email protected] --save-dev
☝️ Папка проекта не должна называться gulp
☝️ Запускать можно и отдельные функции, например gulp css
☝️ У кого копирует в dist только .jpg попробуйте немного изменить запись форматов с /*.{jpg, png, svg, gif, ico, webp} на /*.+(png|jpg|gif|ico|svg|webp)
☝️ Для WEBP-CSS следует использовать настройки: webpcss({webpClass: '.webp',noWebpClass: '.no-webp'}
☝️ WEBP-CSS выдает ошибку если в названии файла картинки есть пробелы и/или кириллица

👉 Ссылки:
NodeJS - https://nodejs.org/ru/
Gulp - https://gulpjs.com/
Форматы изображений в веб-разработке -    • Форматы изображений в веб-разработке и вид...  

👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:
   • БЕСПЛАТНЫЙ курс по верстке сайтов (Front E...  
👉Настройка редактора VS Code:
   • VS Code настройка установка плагины // Под...  

Содержание:
00:00 - Вступление
00:58 - Установка Node.js
02:24 - Работа с терминалом (командной строкой)
04:02 - Установка Gulp глобально
04:46 - Создание package.json
06:53 - Установка Gulp в проект
08:21 - Создание gulpfile.js, файлов и папок проекта
10:38 - Первый запуск Gulp
11:21 - Очистка пакетного менеджера (решение проблем)
12:16 - Написание "сценария", создание переменных
19:28 - Обновление браузера
23:24 - Работа с HTML, подключение других файлов
35:20 - Удаление папки с результатом
37:04 - Работа с CSS (SASS/SCSS)
48:25 - Работа с JavaScript файлами
52:34 - Работа с изображениями, конвертация в WEBP
01:05:56 - Работа со шрифтами
01:15:16 - Запуск нового проекта
01:16:52 - Важное напутствие!

👉 Страницы плагинов:
BrowserSync - https://www.browsersync.io/docs/gulp
File Include - https://www.npmjs.com/package/gulp-fi...
Del - https://www.npmjs.com/package/del
Sass - https://www.npmjs.com/package/gulp-sass
Autoprefixer - https://www.npmjs.com/package/gulp-au...
Group CSS media-queries - https://www.npmjs.com/package/gulp-gr...
Rename - https://www.npmjs.com/package/gulp-re...
Clean CSS - https://www.npmjs.com/package/gulp-cl...
Uglify ES - https://www.npmjs.com/package/gulp-ug...
Babel - https://www.npmjs.com/package/gulp-babel
Imagemin - https://www.npmjs.com/package/gulp-im...
WEBP - https://www.npmjs.com/package/gulp-webp
WEBP HTML - https://www.npmjs.com/package/gulp-we...
WEBP CSS - https://www.npmjs.com/package/gulp-we...
Fonter - https://www.npmjs.com/package/gulp-fo...
ttf2woff - https://www.npmjs.com/package/gulp-tt...
ttf2woff2 - https://www.npmjs.com/package/gulp-tt...
SVG Sprite - https://www.npmjs.com/search?q=gulp-s...

👉JS функции и миксин из урока:
http://fls.guru/gulp.html

👉Решение проблем:
npm cache clean --force (очистака npm)
npm i npm -g (установка npm)

🔴 Получить доступ к плюшкам + поддержать канал:   / freelancerlifestyle  
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook:   / freelancerlifestyle  
🔴 Instagram:   / freelancer.lifestyle  

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал:    / freelancerlifestyle  

🤟 Живи, а работай в свободное время! ©