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

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

🔴 Готовая сборка из урока: https://www.patreon.com/posts/36724521

Уточнения.
☝️ У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install webp-converter@2.2.3 --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/
Форматы изображений в веб-разработке - https://youtu.be/YHV35GiXA-w

👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:
https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr
👉Настройка редактора VS Code:
https://www.youtube.com/watch?v=nxCLXMBl4e4&list=PLM6XATa8CAG5v6T2a0TTdwyK0nZrSRxFi&index=5

Содержание:
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-file-include
Del - https://www.npmjs.com/package/del
Sass - https://www.npmjs.com/package/gulp-sass
Autoprefixer - https://www.npmjs.com/package/gulp-autoprefixer
Group CSS media-queries - https://www.npmjs.com/package/gulp-group-css-media-queries
Rename - https://www.npmjs.com/package/gulp-rename
Clean CSS - https://www.npmjs.com/package/gulp-clean-css
Uglify ES - https://www.npmjs.com/package/gulp-uglify-es
Babel - https://www.npmjs.com/package/gulp-babel
Imagemin - https://www.npmjs.com/package/gulp-imagemin
WEBP - https://www.npmjs.com/package/gulp-webp
WEBP HTML - https://www.npmjs.com/package/gulp-webp-html
WEBP CSS - https://www.npmjs.com/package/gulp-webpcss
Fonter - https://www.npmjs.com/package/gulp-fonter
ttf2woff - https://www.npmjs.com/package/gulp-ttf2woff
ttf2woff2 - https://www.npmjs.com/package/gulp-ttf2woff2
SVG Sprite - https://www.npmjs.com/search?q=gulp-svg-sprite

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

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

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

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

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

Видео Gulp настройка установка плагины. Пошаговая инструкция по настройке сборки Gulp 4 для верстки сайтов канала Фрилансер по жизни - IT и фриланс