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

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   🤟 Живи, а работай в свободное время! ©