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

Gulp - это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!
🔴 ОБНОВЛЕННОЕ ВИДЕО: • Video
🔴 Готовая сборка 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 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 - nodejs.org/ru/
Gulp - gulpjs.com/
Форматы изображений в веб-разработке - • Форматы изображений в ...
👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS:
• БЕСПЛАТНЫЙ курс по вер...
👉Настройка редактора 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 - www.browsersync.io/docs/gulp
File Include - www.npmjs.com/package/gulp-fi...
Del - www.npmjs.com/package/del
Sass - www.npmjs.com/package/gulp-sass
Autoprefixer - www.npmjs.com/package/gulp-au...
Group CSS media-queries - www.npmjs.com/package/gulp-gr...
Rename - www.npmjs.com/package/gulp-re...
Clean CSS - www.npmjs.com/package/gulp-cl...
Uglify ES - www.npmjs.com/package/gulp-ug...
Babel - www.npmjs.com/package/gulp-babel
Imagemin - www.npmjs.com/package/gulp-im...
WEBP - www.npmjs.com/package/gulp-webp
WEBP HTML - www.npmjs.com/package/gulp-we...
WEBP CSS - www.npmjs.com/package/gulp-we...
Fonter - www.npmjs.com/package/gulp-fo...
ttf2woff - www.npmjs.com/package/gulp-tt...
ttf2woff2 - www.npmjs.com/package/gulp-tt...
SVG Sprite - www.npmjs.com/search?q=gulp-s...
👉JS функции и миксин из урока:
fls.guru/gulp.html
👉Решение проблем:
npm cache clean --force (очистака npm)
npm i npm -g (установка npm)
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©