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

Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! ОБНОВЛЕННОЕ ВИДЕО: https://www.youtube.com/watch?v=Qp1ZMTM7Xpw
Готовая сборка GULP из урока (патреон):
Спасибо за поддержку бесплатного обучающего контента! Уточнения. 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 -
Gulp -
Форматы изображений в веб-разработке -
БЕСПЛАТНЫЙ курс по верстке сайтов (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 -
File Include -
Del -
Sass -
Autoprefixer -
Group CSS media-queries -
Rename -
Clean CSS -
Uglify ES -
Babel -
Imagemin -
WEBP -
WEBP HTML -
WEBP CSS -
Fonter -
ttf2woff -
ttf2woff2 -
SVG Sprite -
JS функции и миксин из урока:
Решение проблем: npm cache clean --force (очистака npm) npm i npm -g (установка npm) Получить доступ к плюшкам + поддержать канал:
Telegram канал:
(
Telegram чат по верстке:
(
Facebook: https://www.facebook.com/freelancerlifestyle
Instagram: https://www.instagram.com/freelancer.lifestyle
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
Живи, а работай в свободное время! ©