Одну секунду
Что-то сучилось. Попробуйте еще раз.
Плагин gulp imagemin смотреть последние обновления за сегодня на .
В этом уроке мы настроим работу плагин Imagemin в Gulp. Данный плагин позволит сжимать изображения в нашем проекте и уменьшить их объем. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Я покажу улучшенную версию Сборки проекта на Gulp 4, в этом видео уроке по сборщику Gulp мы так же узнаем как сжимать изображения на Gulp 4 с помощью модуля gulp-imagemin. !!! Предупреждение на гитхабе было не из за модуля del, а из за файла package-lock.json Поэтому в файл .gitignore была добавлена строка package-lock.json для того чтобы этот файл не загружался в репозиторий. Данный файл будет создан автоматически так же как и папка node_modules после выполнения команды npm i Плагин gulp-sass обновился, в связи с этим немного изменился принцип его подключения. Для корректной работы таска styles нужно дополнительно установить пакет sass: npm i sass save-dev и заменить способ подключения с: const sass = require('gulp-sass'); на: const sass = require('gulp-sass')(require('sass')); ✔Советую посмотреть: Сборка проекта на Gulp 4: 🤍 Плейлист Уроки по сборщику Gulp 4: 🤍 Сборка проекта на Gulp 4: 🤍 Работа с препроцессорами: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp #gulp4 #itdoctor #обучение #gulpsass #gulpless #gulpbuild
Сборка Gulp в моем Telegram-канале: 🤍 🔥Поддержать канал можно здесь: 🤍 Это максимально подробный большой видеоурок по настройке с нуля Gulp 4 для начинающих, в нём по шагам объясняется, как правильно и без ошибок установить и настроить сборщик (таскраннер) Gulp. Изучив данный курс вы получаете свою собственную понятную сборку Gulp, мы разберём, как работает gulpfile.js, как устроен package.json и многое другое. После изучения курса, вы сможете сами создавать удобные сборки Gulp для любых ваших задач, и сможете понимать, как всё устроено в конфигурационных файлах. Сборка обновлена и построена на основе устаревшей сборки Gulp Дмитрия Валака (канал BrainsCloud), с объяснением и уточнением многих моментов. В этом видео: 0:00 Что такое Gulp и зачем он нужен 4:30 Установка Node JS 6:52 Установка Git Bash 9:49 Как установить Gulp глобально 10:51 Создание папки для Gulp-проекта 12:15 Создание Package.json | Начальная настройка 16:28 Создание Gulpfile.js 19:20 Установка модулей/плагинов для Gulp 19:55 Плагин Gulp-Autoprefixer | Установка и зачем он нужен 22:14 Плагин Gulp-CSSBeautify | Установка и зачем он нужен 23:21 Плагин Gulp-Strip-CSS-Comments | Установка и зачем он нужен 24:16 Плагин Gulp-Rename | Установка и зачем он нужен 25:21 Плагин Gulp-Sass | Установка и зачем он нужен 25:40 Ошибка Gulp-Sass | Решение ошибки 27:25 Плагин Gulp-CSSnano | Установка и зачем он нужен 28:08 Плагин Gulp-Rigger | Установка и зачем он нужен 29:14 Плагин Gulp-Uglify | Установка и зачем он нужен 29:30 Плагин Gulp-Plumber | Установка и зачем он нужен 30:22 Плагин Gulp-Imagemin | Установка и зачем он нужен 31:02 Ошибка Gulp-Imagemin | require is not defined in ES module 33:17 Плагин Del | Установка и зачем он нужен 33:54 Ошибка плагина Del 34:43 Плагин Panini | Установка и зачем он нужен 35:31 Плагин BrowserSync | Установка и зачем он нужен 36:16 Удобная структура проекта 39:15 Сonst Path | Настройка путей к папкам проекта 49:51 Таск HTML | Настройка GULP-Тасков 58:07 Таск CSS | Настройка GULP-Тасков 1:07:31 Таск JS | Настройка GULP-Тасков 1:13:43 Таск IMAGES | Настройка GULP-Тасков 1:20:01 Таск CLEAN | Настройка GULP-Тасков 1:24:10 Таск FONTS | Настройка GULP-Тасков 1:25:01 Одновременный запуск тасков | Настройка Build | Gulp.series 1:28:11 Таск WATCH | Настройка слежения за изменениями | Gulp.parallel 1:33:45 Настройка BrowserSync | Live Reload | Локальный сервер 1:39:33 Gulp-Nofify | Красивое отображение ошибок | Установка, настройка 1:45:23 Плагин Panini | Как установить, настроить 1:48:20 Плагин Panini | Шаблоны, разбиение HTML на части | Layouts Partials 1:55:41 Плагин Panini | Как работать с Data JSON 1:59:03 Перенос настроек Gulp в новый проект 2:03:59 Заключение
Нравится канал? Жми сюда: 🤍 Привет всем! В этом видео мы научимся уменьшать изображения. Код урока: gulp.task('img', function () { return gulp.src('app/img/*.jpg') .pipe(imagemin([ imageminJpg({ loops: 4, min: 50, max: 95, quality: 'high' }) ])) .pipe(gulp.dest('dist/img')) }); Ссылка: 1. 🤍 2. 🤍
Сборщик проектов Gulp. Поможет сохранить время и увеличить производительность. В прошлом видео мы установили npm, gulp, nodejs. В данном мы рассмотрим: сжатие изображений с помощью gulp-imagemin. Ссылка на github gulp проекта: 🤍
#stubborndevelopers In this video we will learn that how we can minify/compress images using gulp npm i gulp-imagemin save Node.JS Tutorial in English 2021 Playlist 🤍 React.JS Tutorial in Hindi 2021 Playlist 🤍
В этом уроке я покажу как происходит обновление NPM пакетов через NCU (плагин npm-check-updates). Ошибка с del и imagemin возникает при обновлении до последнее версии но с использованием старого синтаксиса в коде. Мы рассмотрим как исправить ошибку с плагином del и imagemin. Плагин npm-check-updates (ncu): 🤍 Курс "Frontend разработчик на HTML, CSS и JavaScript": 🤍 Курс "Тренажер по вёрстке, плагин Emmet": 🤍 00:00 Вступление и краткий анонс 00:18 Стандартное обновление 01:05 Про плагины del и iamgemin 04:46 Обновление с помощью ncu 11:47 Удаление пакетов и установка старых версий ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp #npm #nodejs #ncu #itdoctor
ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍 Мой заработок на YOUTUBE - ►🤍
W tej lekcji pokażę Ci jak zainstalować i skonfigurować zadanie, które pomoże nam zoptymalizować pliki graficzne. Kliknij tu, aby subskrybować mój kanał ► 🤍 Link do wszystkich lekcji ► 🤍 Kod źródłowy na Githubie: ► 🤍 Linki do strony wspomnianych w tym wideo: ► 🤍 ► 🤍 = Zapraszam także na mojego bloga ► 🤍 a także forum dla webmasterów ► 🤍
Gulp , açık kaynak kodlu javascript aracıdır ve projelerimizde zaman alan , can sıkan işlemleri Gulp'ı görevlendirerek çok hızlı ve basit bir şekilde yapabiliyoruz. İşte bu video serisinde Gulp'ın ne olduğundan, nasıl kullanıldığından bahsettik. Kaynak kodlara GitHub üzerinden erişebilirsiniz 🤍
Las imágenes frecuentemente inflan el peso de las aplicaciones web. Imagemin es una excelente herramienta para comprimir imágenes reduciendo hasta un 40% del peso original. Links: Repo: 🤍 Mis redes: Github:🤍 Twitter: 🤍 Facebook: 🤍 WebSite: 🤍
I'll show you how to convert, autoprefix, and minify SCSS, minify javascript, and minify and create webp images with Gulp. Type one command in your terminal ('gulp') and focus on writing SCSS, JS, and adding images. Gulp will do the rest! We use a variety of plugins: • gulp-sass (convert SCSS to CSS) • gulp-autoprefixer (add support for older browsers) • gulp-clean-css (minify CSS) • gulp-terser (minify JS—support for ES6) • gulp-imagemin (minify images jpg and png for the web) • gulp-webp (create webp images for the web) Please like and subscribe for more content. And let me know in the comments what else you’d like me to cover! Source code: 🤍
The Complete Guide to Building Premium WordPress Themes 2022
В этом уроке мы установим плагин Newer. Благодаря этому плагину мы сможем не обрабатывать повторно те файлы, которые не изменялись. Особенно это полезно для отслеживания новых изображений. А те изображения, которые уже были сжаты нет необходимости сжимать повторно. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
В этом уроке мы подключим плагин HTMLmin, который позволит минифицировать HTML файл. Если вам не нужно этого делать то можно пропустить этот шаг. Но обязательно посмотрите этот урок чтобы знать, как это делается. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
+ Todos los proyectos Web tiene al menos un set de imágenes. Hoy aprenderemos a automatizar su optimiazación con Gulp e Imagemin. + Serie completa en: 🤍 + Seguimos hablando en SnapChat!: 🤍 + Más en 🤍.
Buy the full source code of application here: 🤍 Subscribe for more Videos: 🤍 Watch next – [Popular Videos on the Channel] [Login with Google Account using Javascript] 🤍 [What is AJAX and How it Works | Short Tutorial for Beginners] 🤍 [Javascript Fetch Api Example] 🤍 [jsPDF Tutorial | PDF Library in Javascript] 🤍 [Youtube Data API V3 App in 1 Hour] 🤍 [AngularJS CRUD Application] 🤍 [Uploading Files using Google Drive Api] 🤍 Recommended Playlist – [Build a CRUD Applicaiton in VUE and Firebase] 🤍 [MongoDB Tutorial for Absolute Beginners] 🤍 [Building a Playlist Search App using Youtube Data Api v3] 🤍 [Secure Login System in PHP & MYSQL] 🤍 [Real Time Chatting App in Socket.io and Express] 🤍 Let’s connect: Facebook Page – 🤍 Official Website – 🤍
This is completely updated tutorial video on Gulp 4.0 with NodeJS, BrowserSync, SASS, SourceMaps, CleanCSS , AutoPrefixer, Gulp Changed, Gulp Uglify and more. My previous videos have been rendered obsolete since Gulp has been updated from 3.9 to 4.0. That's the beauty of software development, it keeps you on your toes. Code Your Very Own WordPress Theme with DevWP: 🤍 Code for your Gulpfile and Links to More Resources: 🤍 I felt it was my duty to create a new Gulp 4.0 video featuring some of the most widely used Gulp Plugins. This is an Advanced Gulp tutorial video that I make approachable for beginners as well as advanced users. I demonstrate how to create a gulpfile and a package json file along with how to use gulp to streamline your workflow and save you a tremendous amount of time. Gulp is a toolkit for web designers and developers to help automate their workflow. It's usage has continuously grown over the years and with almost 4,000 gulp plugins available, it's no wonder Gulp is one of the most popular task runners. Gulp uses NodeJS which is server side JavaScript used by a growing number of web developers. In this video I showcase several useful Gulp plugins like: 1 - Browser Sync 2 - Image Min 3 - Gulp Sass 4 - Gulp Source Maps 5 - Gulp Concat 6 - Gulp Clean CSS 7 - Uglify for JavaScript Minification 8 - Line Ending Corrector 9 - and more Table of Contents: Unproductive Workflow 00:52 Gulp Plugins Used 05:08 Start The Actual Tutorial 05:46 Node 06:55 Remove Old Gulp Version 08:45 Install Gulp 4 Globally 09:16 Make a Directory for Gulp & Node 09:55 Package JSON File 10:42 Gulp Local Project Installation 11:42 Install Gulp Plugins: 13:18 Creating the Gulpfile.js 22:56 Testing our Gulpfile 01:02:42 If you've found yourself running out of time with your coding projects, or spending to much time on very simple, basic but time consuming tasks, then using Gulp JS will make you a more productive web designer and developer. My goal is to help you achieve your goal of becoming a productive coder. Hopefully you enjoyed this Gulp 4.0.0 tutorial for beginners and advanced users. #gulp #gulpjs #gulp4
Заказать сайт у меня - 🤍 Поддержать автора - 🤍 В это видео пойдет речь про gulp - plumber. У меня возникла проблема что browsersync прекращает свою работу если я делаю критическую ошибку при написании css кода. Например не поставил "}". Gulp watch прекращает свою работу и выдает нам большую ошибку в консоле. Gulp - plumber поможет нам без прекращения gulp watch продолжить работать и выдаст нам все наши критические ошибки. Gulp-plumber - 🤍
В этом уроке мы расширим возможности нашей сборки и добавим плагин Autoprefixe для добавления префиксов в CSS код, Sourcemaps чтобы видеть в инструментах разработчика подсказки по коду в исходном файле и завершим настройку Babel. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Gulp - это планировщик задач и сборщик проектов. GULP умеет обновлять браузер, собирать в один несколько HTML или PUG файлов. Также Gulp работает с CSS препроцессорами, например LESS, SASS, STYLUS и оптимизирует их. Сжимает изображения и многое другое. GULP установка настройка и плагины в 2022. Gulp 4 полный курс. В этом уроке по Gulp мы будем работать с менеджером пакетов NPM в редакторе кода VS Code, инициализировать проект с помощью Node.js и создавать конфигурационный файл package.json, установим Gulp глобально и локально, научимся устанавливать и подключать NPM плагины в наш проект. Создадим базовую версию сборки проекта на Gulp, которая позволит нам обрабатывать стили, скрипты и отслеживать изменения в этих файлах автоматически. Сборка и настройка проекта Gulp в 2022 году это минимум который должен знать любой frontend разработчик или даже верстальщик. Так же я покажу, как повторно использовать готовую сборку в своих новых проектах размещу её на GitHub и вы в любой момент сможете скачать код настроенного Gulp проекта. Мы расширим возможности нашего сборщика Gulp и добавим возможность сжимать изображения, минифицировать HTML код, так же добавим несколько полезных плагинов для работы со стилями и скриптами. Улучшим вывод информации в терминал и настроим автоматическое обновление сайта при изменении любых файлов в нашем проекте. Я покажу как настроить плагины для работы с препроцессорами Sass, Stylus, Pug и языками Type Script и Coffee Script. После подведения итогов данного курса у вас будет полное понимание как работать с Gulp, как добавить что то в эту сборку или изменить её под себя, а так же вы получите готовый код сборки финальной версии нашего планировщика задач Gulp. ▶▶ Содержание◀◀ 00:00:00 gulp что это и установка gulp 4 00:05:38 Установка Node.js 00:13:10 Инициализация проекта NPM init 00:22:41 gulp плагины и npm пакеты 00:35:34 Константа с путями 00:42:17 Обработка стилей 00:54:12 gulp watch 01:02:53 Обработка скриптов 01:12:43 Повторное использование сборки 01:25:40 gulp 4 babel, autoprefixer, sourcemaps 01:37:04 Плагин Imagemin 01:44:08 Плагин HTMLmin 01:48:17 Плагин Size 01:51:25 Gulp Newer 01:56:21 gulp 4 browsersync 02:08:27 Работа с Pug 02:13:18 Препроцессор Stylus 02:16:55 настройка gulp sass 02:20:49 Язык TypeScript 02:25:02 Компиляция CoffeeScript 02:27:53 Итоги урока по Gulp 4 ▶▶ Функционал нашей GULP сборки ◀◀ - компиляция препроцессора PUG - минификация HTML, CSS, JavaScript - компиляция препроцессоров LESS, SASS, STYLUS - автоматическое добавление префиксов CSS - транспиляция языков Type Script и Coffee Script - преобразования кода ECMAScript 2015 + в обратно совместимую версию JavaScript с - помощью Babel - объединение нескольких файлов JavaScript в один - сжатие изображений - отслеживание новых изображений, которые еще не были сжаты - отслеживание изменений в файлах и автоматический запуск повторной обработки - генерация sourcemaps - отображение размеров файлов в терминале - локальный сервер с автоматическим обновлением страницы при изменении файлов ▶▶ GULP плагины из урока ◀◀ gulp Сборщик Gulp gulp-htmlmin Минификация HTML файлов gulp-pug Pug препроцессор HTML кода gulp-less Компиляция Less файлов gulp-stylus Компиляция Styl файлов sass Компилятор Sass gulp-sass Компиляция Sass и Scss файлов gulp-uglify Сжатие и оптимизация Java Script кода gulp-coffee Преобразует Coffee Script в Java Script gulp-typescript Преобразует Type Script в Java Script typescript Язык Type Script gulp-babel Преобразует Java Script в старый стандарт 🤍babel/coreЯдро Babel 🤍babel/preset-env Пресет для компиляции Babel gulp-clean-css Минификация и оптимизация CSS файлов del Удаление каталогов и файлов gulp-sourcemaps Карта строк кода для инструментов разработчика gulp-autoprefixer Автоматическое добавление префиксов в CSS gulp-imagemin Сжатие изображений gulp-concat Объединение нескольких файлов в один gulp-newer Отслеживание только новых файлов gulp-rename Переименовывает файлы gulp-size Отображение информации о размерах файлов в терминале browser-sync Автоматическое обновление сайта при изменении файлов Готовая сборка Gulp 4: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp4 #gulp #gulpbuild #itdoctor
В этом уроке мы настроим синхронизацию нашего браузера с кодом. Создадим локальный сервер с помощью Browser Sync и настроим автоматическую перезагрузку сайта при изменении кода в редакторе. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
A brilliant task runner that can significantly improve our workflow. A tool that is relatively easy to configure and has a lot of plugins (4188 according to the documentation). You will find instructions on how to configure your Gulp to handle graphics, .js and .css files. Below are links to the plugins I used in this project and the Gulp documentation. Gulp.js - 🤍 Plugins - 🤍 Gulp Uglify - 🤍 Gulp Clean CSS - 🤍 Gulp ImageMin - 🤍
Нравится канал? Жми сюда: 🤍 Привет всем! В этом видео мы продолжаем работать над секцией деплоя нашего проекта. Сегодня мы установим расширение del и научимся копировать нужные нам файлы из папки разработки в папку деплоя. Код урока: gulp.task('del', function () { return del.sync('dist') }); gulp.task('copy', function () { return gulp.src('app/fonts//*') .pipe(gulp.dest('dist/fonts')) }); Ссылка: 🤍
Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp 4? Самостоятельно конвертирует и подключает шрифты. Обновляет браузер. Собирает в один несколько HTML файлов. Работает с CSS препроцессорами, например SCSS и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов, оптимизирует и сжимать их. Умеет создавать SVG спрайты и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! 🔴 ОБНОВЛЕННОЕ ВИДЕО: 🤍 🔴 Готовая сборка 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 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 - 🤍 Gulp - 🤍 Форматы изображений в веб-разработке - 🤍 👉 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS: 🤍 👉Настройка редактора 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 - 🤍 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: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©
Установка Node.js и настройка Gulp 4 с плагинами для ускорения разработки. Gulp-sass, browsersync. .... Это видео было записано в результате того, что в какой-то момент моя сборка gulp перестала работать на новом пк. Оказалось, что вышла 4 версия и по умолчанию стала устанавливаться она. А синтаксис был изменен, и мне пришлось настраивать свой Gulpfile снова. .... Посмотрев большое количество роликов в интернет, я увидел, что видео на такую тему встречаются очень редко, а нужная мне конфигурация не затрагивалась вообще никем. И я принял решение познакомить новичков с новой версией этого такс менеджера. .... Ставь паузу и переписывай код с экрана или воспользуйся этим кодом: 🤍 Ссылка на сайт с плагинам: 🤍 Я обучаюсь программированию тут: 🤍 .... Не забудь поставить свой лайк этому видео, если оно было полезным и подписывайся на канал. .... Добавляйся ко мне в друзья в других социальных сетях: VK: 🤍 instagram: 🤍 Facebook: 🤍 Youtube: 🤍
Here we show you how to easily compress images in a Gulp task. Subscribe to Level Up Pro for extra features! 🤍 Subscribe to the Level Up Newsletter 🤍 For questions post in the comments or visit: 🤍 To Support Level Up Tuts: 🤍 Simple cloud hosting, built for developers.: 🤍
Нравится канал? Жми сюда: 🤍 Привет всем! В этом видео Код урока: gulp.task('tinypng', function () { gulp.src('app/img/*') .pipe(imagemin('eKJf273ZwggolXsloo3tDizmOiER9tgr')) .pipe(gulp.dest('dist/img')); }); Ссылки: 🤍 🤍
Детали скринкаста - на странице 🤍
Обновленная начальная сборка по gulp 4. Создал сборку для дальнейшего масштабирования и верстки проектов на канале. Видео о препроцессорах: 🤍 Node: 🤍 Gulp: 🤍 npm: 🤍 git: 🤍 Мой патреон: 🤍 0:40 - Что такое Gulp 3:17 - Как установить Gulp 17:38 - Как установить Gulp локально 20:30 - Создание структуры папок 26:32 - Установка плагина gulp-sass и sass 40:24 - Установка плагина gulp-concat 44:40 - Установка плагина gulp-uglify-es 52:00 - Добавление функции watch 57:06 - Установка плагина browsersync 1:10:20 - Добавление функции parralel 1:17:00 - Установка плагина gulp-autoprefixer 1:22:50 - Как поключить несколько файлов js 1:29:55 - Как подключать css из библиотек 1:34:45 - Как настроить билд 1:39:05 - Установка плагина gulp-clean 1:42:30 - Добавление функции series 1:47:18 - Как использовать сборку на практике Подпишитесь на канал, если вам понравилось данное видео: 🤍
Перекличка Gulp плагинов для верстки. Html Css Js процессоры gulp-jade gulp-haml gulp-slim gulp-less gulp-stylus gulp-sass gulp-coffee gulp-babel gulp-autoprefixer gulp-sourcemaps Изображения gulp-imagemin gulp.spritesmith gulp-base64 Сборка gulp-useref gulp-processhtml gulp-flatten Helpers gulp-htmlmin gulp-minify-css gulp-uglify gulp-htmlhint gulp-csslint gulp-jshint browser-sync wiredep gulp-concat gulp-replace-path del gulp-if gulp-newer gulp-uncss gulp-plumber gulp-notify gulp-filter gulp-rename gulp-combine-media-queries gulp-csscomb
Модуль gulp-rename на Gulp 4, Уроки по сборщику Gulp 4. В этом видео я покажу вам Модуль gulp-rename. Мы установим модуль gulp-rename и подключим его к нашей сборке. gulp-rename нужен для переименовывания файлов, добавления суффиксов и префиксов к файлам. ✔Советую посмотреть: Сборка: 🤍 Модуль: 🤍 Плейлист Уроки по сборщику Gulp 4: 🤍 Сборка проекта на Gulp 4: 🤍 Работа с препроцессорами: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp #gulp4 #itdoctor #обучение #gulpsass #gulpless #gulpbuild
In this video we look at saving HTTP requests and speeding up our website by turning any css links e.g. background-image links into base64 encoded data uri strings. This saves on the browser having to make external calls to get the images and improves user experience. You can read about the package via npm here: 🤍 Code used in the video; gulpfile.js var gulp = require('gulp'); var cssBase64 = require('gulp-css-base64'); //Without options gulp.task('default', function () { return gulp.src('stylesheet.css') .pipe(cssBase64()) .pipe(gulp.dest('css')); }); Thanks for watching! If you enjoyed the video then please like, subscribe and share with your friends. You can check out my other Gulp.js videos here; - Gulp Plugin: Markdown to HTML (🤍 - Gulp.js CSS Minification and NPM Introduction (🤍 - How to install Gulp.js, Node.js and NPM on Ubuntu 14.04 (🤍 - DISCLAIMER: I am not responsible for any damage this may cause to your computer / machine. Follow this video and commands at your own risk.
Супер крутая вечеринка с galp 4 блекджеком, includ-ом полезных подруг врывается в чат. Настроим графику, получим не только скучный png и jpg, а и поработаем с avif и webp, конвертнем шрифты, то, что нужно для верстки крутого проекта, велком на борт, гайсы. Сборка на patreon: 🤍 Сборка с нуля: 🤍 Дружно подписываемся на телеграм: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
Нравится канал? Жми сюда: 🤍 Привет всем! В этом видео мы рассмотрим настройку плагина gulp-concat. Этот плагин позволяет объединять (слепливать) несколько файлов в один а заодно и переименовывать этот файл. Код урока: var gulp = require('gulp'); var browserSync = require('browser-sync'); var csso = require('gulp-csso'); var rename = require("gulp-rename"); var concat = require('gulp-concat'); gulp.task('csso', function () { return gulp.src('app/css/*.css') .pipe(concat('main.mini.css')) .pipe(csso()) // .pipe(rename({ // suffix: ".mini" // })) .pipe(gulp.dest('dist/css/')); }); gulp.task('sync', function() { browserSync.init({ server: { baseDir: "app/" } }); }); gulp.task('default', ['sync'], function() { gulp.watch('app/*.html', browserSync.reload); gulp.watch('app//*.css', browserSync.reload); gulp.watch('app//*.js', browserSync.reload); }); Gulp-concat: 🤍
Некоторые CSS3 свойства некорректно отображаются в различных браузерах. Чтобы это исправить придумали специальные префиксы для свойств. Gulp обладает плагином Autoprefixer, позволяющий не прописывать префиксы к свойствам каждый раз вручную. В уроке вы изучите плагин Autoprefixer, а также познакомитесь с Source Mapping. 1) Курс по Gulp на itProger: 🤍 ✔ Сообщество программистов: 🤍 ✔ - Вступай в группу Вк - 🤍 🚀 Группа FaceBook - 🤍 Инстаграм itProger: 🤍 Instagram: 🤍 Telegram: 🤍 Twitter - 🤍 - Уроки от #GoshaDudar 👨🏼💻 - Все уроки по хештегу #goshaGulp
Part of 'Rapid Gulp' video series. For the full Course visit: 🤍 Your files are most likely larger than they need to be. If we shrink them down, your site will load more quickly. • Download gulp-uglify, gulp-minify-CSS, and gulp-imagemin • Write tasks to handle JavaScript, CSS, and images, where the “default” task relies on all three • Run the “default” task and check whether your files are now smaller _ For the latest in Web Development video tutorials, please visit: 🤍 Find us on Facebook 🤍 Follow us on Twitter - 🤍
.svg){kind=small}
![#11 Плагин Imagemin в Gulp, Сжатие изображений - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/CPLmqMyPcOA/mqdefault.jpg "#11 Плагин Imagemin в Gulp, Сжатие изображений - Курс по Gulp 4 [2021]")
![#14 Плагин Newer в Gulp, Отслеживание только новых файлов - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/fWJNHOYM0k4/mqdefault.jpg "#14 Плагин Newer в Gulp, Отслеживание только новых файлов - Курс по Gulp 4 [2021]")
![#12 Плагин HTMLmin в Gulp, Минификация HTML - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/GI6Bl0z5rZ8/mqdefault.jpg "#12 Плагин HTMLmin в Gulp, Минификация HTML - Курс по Gulp 4 [2021]")
![#10 Плагин Autoprefixer, Sourcemaps, Babel на Gulp - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/MxCnxOfbCng/mqdefault.jpg "#10 Плагин Autoprefixer, Sourcemaps, Babel на Gulp - Курс по Gulp 4 [2021]")
![#15 Плагин Browser Sync в Gulp, Авто-обновление в браузере - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/W2yysits8xI/mqdefault.jpg "#15 Плагин Browser Sync в Gulp, Авто-обновление в браузере - Курс по Gulp 4 [2021]")
