Gulp сборка проекта

Gulp сборка проекта смотреть последние обновления за сегодня на .

GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта

166241
6093
1574
01:46:29
22.12.2021

Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp? Самостоятельно конвертирует и подключает шрифты, а также записывает подключение в файл стилей. Обновляет браузер. Собирает в один несколько HTML\PUG файлов. Работает с CSS препроцессорами, например SASS(SCSS) и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов с помощью WEBPACK, оптимизирует и сжимает их. Есть возможность работать в синтаксисе ES6. Умеет создавать SVG спрайты, создавать ZIP архив с результатом, Отправлять готовую верстку на FTP сервер и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!! Если возникает ошибка: "[HTML] Error: Callback called multiple times"... Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов. Оновився плагін, зараз треба писати import deleteAsync from "del"; 🔴 Скачать готовую сборку (патреон, любой уровень): 🤍 Спасибо за поддержку бесплатного обучающего контента! 🔴 Функция определения WEBP 🤍 ➕ Плагины от зрителей: gulp-cache, gulp-sharp-responsive 🚀 Надежный хостинг FirstVDS. Переходи и получай скидку 25% на первый месяц: 🤍 ✅ Набор на курс по верстке: 🤍 🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): 🤍 👉 Настройка редактора VS CODE: 🤍 🔴 Карта канала: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Курс по верстке: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 00:00:00 - Что умеет Gulp? 00:00:40 - Подготовка к работе. NodeJS, GIT Bush 00:03:16 - Создание Package.json. Включаем ES6 модули. 00:04:58 - Установка GULP. Глобально и в проект 00:06:42 - Структура файлов и папок. Архитектура сборки 00:10:23 - Копирование файлов 00:16:45 - Настройка наблюдателя (watch) 00:20:31 - Очистка папки с результатом 00:22:51 - Обработка HTML/PUG файлов 00:46:09 - Локальный сервер. Автообновление страницы. 00:49:59 - Обработка SASS/SCSS/CSS файлов 01:03:14 - Обработка JavaScript файлов. WEBPACK 01:10:15 - Оптимизация картинок. Создание WEBP 01:17:36 - Конвертация шрифтов. Запись в файл стилей. 01:25:49 - Создание SVG спрайтов. 01:30:37 - Режимы разработчика (dev) и продакшн (build) 01:37:03 - Создание ZIP архива с результатом 01:39:47 - Выгрузка результата на сервер по FTP 01:44:20 - Использование Gulp сборки для нового проекта 01:46:21 - Заключение 👉🤍IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - 🤍 👉🤍СЛУШАЙ! Канал с интересными историями из жизни. 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 #обучение #gulp #фрилансерпожизни 🤟 Живи, а работай в свободное время! ©

Gulp сборка 2022 с нуля | Установка настройка и запуск — полный курс по Gulp для верстки сайтов

38676
1443
606
02:03:42
17.11.2021

Готовая сборка Gulp Starter: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 В этом курсе мы рассмотрим что такое Gulp и для чего он нужен, как правильно выполнить его установку и запустить на windows, какие плагины использовать для работы с HTML, CSS, JavaScript, изображениями и шрифтами. В результате вы получите готовую сборку для верстальщика и сможете использовать ее во всех своих проектах. — при этом мы разобьем всю нашу сборку на отдельные компоненты — настроим скрипты для разработки и продакшена — посмотрим, как использовать ES6 модули — и многое другое Все это в виде подробной инструкции по настройке Gulp с полного нуля: 0:00 Введение 1:09 Установка Gulp (install) 3:49 Написание и запуск задач 7:25 Файловый поток (копирование файлов) 11:02 Маски для выбора файлов 13:40 Задача для работы с HTML 20:24 Отслеживание изменений (gulp watch) 23:40 Синхронизация с браузером (browsersync) 27:00 Обработка ошибок 30:07 Удаление директории 32:08 Работы с Pug 37:17 Модули и файлы конфигурации 46:26 Задача для CSS 01:02:08 Препроцессор Sass (gulp sass) 01:08:03 Работа с JavaScript (babel, webpack) 01:16:58 Оптимизация изображений (htmlmin) 01:23:48 Работа с WebP 01:29:47 Конвертация шрифтов 01:34:50 Подготовка к production 01:43:02 Сокращение кода сборки 01:50:19 Использование модулей ES6 01:59:15 Применение сборки в реальном проекте Если у вас не запускается или не работает Gulp, убедитесь, что ваш проект не называется "gulp" и вы установили пакет "gulp-cli". Остались вопросы? Пишите в комментарии! Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте 🤍 Здесь вы найдете подробные интерактивные курсы по веб-разработке.

GULP установка настройка и плагины в 2022. Gulp 4 полный курс

13774
542
93
02:30:17
12.02.2022

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

Моя сборка для верстки: Gulp + Webpack. Инструмент для ускорения работы верстальщика

5991
191
78
00:55:08
10.10.2021

В данном видео хочу продемонстрировать свою сборку для верстки сайтов. Данные сборки позволяют здорово экономить время за счет того, что выполняют за нас некоторые рутинные задачи. Например, компиляция препроцессорами pug и sass в html и css файлы соответственно, сборка иконок в спрайты, оптимизация изображений, автообновление страницы браузера и др. Данную сборку вы можете скачать с моего Github репозитория - 🤍 Там же найдете инструкцию в текстовом формате. Я постарался описать как можно подробнее, начиная с возможностей и завершая установкой и работой. Тайминги: 0:00 Вступление 03:15 Установка 06:08 Запуск и стартовый шаблон 07:18 Структура проекта 17:51 Автообновление страницы при изменении файлов 19:38 Компонентный подход 22:08 Автосоздание компонентов при помощи bem-tools-create 24:55 Сборка иконок в спрайты 30:38 Проверка js кода на наличие ошибок Eslint и автофикс 35:03 Конвертация изображений в webp формат 39:12 Минимизация файлов Html, Css и Js 41:38 Задача по удалению папки Dist 43:06 Автогенерация фавиконок 47:44 Создание ZIP-архива проекта 50:10 Копирование файлов по FTP 54:38 Заключение Фоновая музыка: –––––––––––––––––––––––––––––– First Light - Atch 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Over You - Atch 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Oceanside by Scandinavianz 🤍 Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: 🤍 Music promoted by Audio Library 🤍 –––––––––––––––––––––––––––––– Song: Markvard - Desire (Vlog No Copyright Music) Music provided by Vlog No Copyright Music. Video Link: 🤍

Верстаю сайт, используя фишки своей Gulp-сборки

20834
589
209
03:06:32
02.03.2022

Привет! В этом видео я сверстаю небольшой лендинг с использованием моей gulp-сборки (готовые сниппеты, плагины, модули с готовым кодом и т.д.). В общем, покажу, как я сам делаю проекты и что использую. Поехали! Сборка: 🤍 Макет: 🤍 Готовый код: 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #gulp #верстка

Gulp 4 - простая сборка проекта для вёрстки и javascript

44766
1246
127
01:47:49
18.10.2018

Простая сборка проекта для новичков. concat, autoprefixer и cleanCSS. uglify. watcher + browser Sync. Дальнейшее развитие сборок для вёрстки и javascipt присутствует на курсах: 🤍 🤍

Сборка frontend проекта - Gulp и Sass (часть 1)

1405
33
5
00:17:39
10.03.2020

Вторая часть - 🤍 Собираем скелет проекта с помощью gulp 4, компилируем scss в css. Пишем свои задачи под gulp. Создаем gulp watch для автоматической сборки scss стилей.

Gulp за 30 минут

39493
1673
93
00:30:46
12.04.2019

Получить профессию Frontend разработчика - 🤍 Подробнее узнать об обучении в Result School - 🤍 Бесплатный курс HTML & CSS - 🤍 Сделать 5 проектов на JavaScript - 🤍 Я в соц сетях: Telegram: 🤍 VK: 🤍 Instagram: 🤍 Мои паблики по JavaScript: Telegram: 🤍 VK: 🤍 Instagram: 🤍 JavaScript cообщества: Discord: 🤍 Telegram: 🤍 Roadmap по каналу: 🤍

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

274836
11253
2728
01:17:26
04.05.2020

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 - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

Улучшенная сборка проекта на Gulp 4, Сжатие изображений на Gulp 4, Плагин gulp-imagemin

5652
241
59
00:21:56
17.05.2019

Я покажу улучшенную версию Сборки проекта на 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

#6 Gulp сборка проекта | Организация скриптов

1067
33
8
00:12:29
08.03.2021

Материалы урока Код: 🤍 npm i focus-visible vanilla-lazyload save Ссылки урока gulp src: 🤍 gulp dest: 🤍 focus-visible: 🤍 focus-visible пример: 🤍 canUseWebp: 🤍 vanilla-lazyload: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp Таймкоды: 0:00 Интро 0:48 Доработки 2:55 Пишем функцию documentReady 6:04 Подключение focus-visible 8:11 Подключение vanilla-lazyload

Сборка проекта на лету, Gulp - Less, Pug

909
26
9
00:27:20
12.11.2020

На случай, если ютуб заблокируют, меня можно найти и в vk: 🤍 присоединяйтесь на мой канал в телеге: 🤍 Мой сборщик проекта работающий на Gulp 4 с оптимизацией файлов и виртуальным сервером Смотри видео до конца. Подписывайся на канал, пиши комментарии и оценивай видео и работу Ссылки: 🤍 🤍 мой VK: 🤍 мой инстаграмм 🤍

Обзор обновления моей сборки Gulp 2.0.4

8102
448
166
00:22:17
12.01.2022

Привет! В этом видео расскажу, что изменилось в моей сборке Gulp за последнее время, а также покажу, как всем этим пользоваться. Содержание: 00:00 - Интро 00:29 - Скачивание исходников 01:06 - Установка зависимостей 01:35 - Про index.html, его изменения 03:40 - Про поддержку avif и webp 05:33 - Про плагины VS Code и сниппеты кода 08:51 - Про gulp-webpack и поддержку модулей 11:29 - Про модульность в scss 13:00 - Про иные ресурсы (видео, фавикон и т.д.) 13:10 - Про папку img и svg-спрайты 14:14 - Про готовые модули 14:31 - Про готовый модуль бургер-меню 17:33 - Про иные изменения (обновление stylelint, node-sass) 17:56 - Про типограф 19:00 - Про новые миксины (rem, image-set) 20:55 - Аутро Сборка: 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #gulp #сборка

Готовим Gulp для проекта

17015
593
41
00:24:32
16.07.2020

Курс: 🤍 Все курсы: 🤍 Телеграмм: 🤍 Позиционирование элементов в html.

Gulp сборка с нуля, современный синтаксис, полное руководство

95460
4725
878
02:06:47
20.11.2020

Друзья, обновил старое видео по gulp 4, использую новый, более удобный, современный синтаксис. Записал вам пошаговое руководство и советы, как обновить свою сборку. Видео о препроцессорах: 🤍 Node: 🤍 Gulp: 🤍 npm: 🤍 browser-sync: 🤍 Тайм-коды: 0:00 Приветствие 1:20 Что такое gulp 2:57 NodeJs (🤍 4:28 Чем удобен VS CODE 5:09 Способ 1 консоль (Самый удобный) 5:48 Способ 2 консоль (Не самый удобный) 7:37 Рекомендации 8:47 Установка gulp глобально 10:14 NPM ( 🤍 12:17 Если уже установлен Gulp 12:57 Установка gulp в Папку (Не спеши нажимать Enter) 13:51 Инициализация проекта ( init - пишем в первую очередь! ) 16:45 Что такое -save-dev 18:30 Файл package-lock.json 18:50 Папка Node_modules 22:36 Выпьем не много чаю и поехали дальше ^^^ 22:50 Создание gulpfile.js 24:18 Что такое предпроцессоры,смотрите видео по ссылке (Видео о препроцессорах: 🤍 24:52 Что умеет gulp 25:40 Первый Плагин (gulp-sass) 40:35 Что такое конкатенация ? 42:32 Второй Плагин (gulp-concat) 45:38 Watch (Слежение) 51:33 Зачем gulp, если есть VSCODE 55:40 Третий Плагин (browser-sync) 1:13:13 скрипты 1:14:31 Четвертый плагин (gulo-uglify-es) 1:34:13 Пятый Плагин (gulp-autoprefixer) 1:40:00 Таcк build 1:45:00 Шестой плагин (gulp-imagemin) 1:54:40 Седьмой плагин ( del) 2:03:07 Как Работать с другими проектами 2:06:46 Конец Подпишитесь на канал, если вам понравилось данное видео: 🤍

Gulp 4. Полное руководство и настройка своей собственной сборки для верстки в 2020

23911
721
276
01:38:06
20.07.2020

Привет! В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является Gulp. Это так называемый таск-раннер, позволяющий, с помощью запуска своих задач и плагинов делать полезную рутинную работу - преобразовывать препроцессор в обычный css, сжимать картинки, создавать svg-спрайты, работать со шрифтами, и многое другое. В этом видео мы познакомимся с Gulp, сделаем свою крутую сборку для верстки сайтов. Поехали! ctrl+c два раза - для остановки сборки. У этого видео есть обновление - добавление новых функций в сборку. Ссылка - 🤍 Содержание: 00:00 - вступление 01:40 - про Node.js и npm 02:57 - создаем папку проекта 03:26 - открываем консоль в конкретной папке 03:45 - создаем файл package.json 05:10 - установка gulp 09:17 - создаем папку исходников - src 10:24 - создаем файл gulpfile.js для написания тасков 11:28 - работа со стилями 27:47 - вотчинг и browsersync (для стилей) 32:36 - обработка html через file-include (и вотчинг) 42:08 - простая перегонка картинок (пока без обработки) 46:10 - работа с svg-спрайтами 52:19 - работа со шрифтами 1:04:15 - простая перегонка ресурсов 1:07:45 - работа с js (webpack-stream) 1:19:48 - делаем build-версию (сжимаем все сильнее + подключаем tinypng) 1:27:52 - деплой верстки на хостинг 1:32:17 - как пользоваться Gulp на других проектах, как запустить сборку в другом месте 1:34:44 - показываю устройство моих файлов в базовой сборке 1:38:00 - заключение ВАЖНО! Я изменил сборку совсем чуть-чуть, после видео, когда протестил ее побольше и увидел небольшую проблемку - при любой ошибке js-кода сборка вылетала. Исправление уже есть по ссылке на github ниже. Я добавил следующий код, чтоб ловить ошибки, не убивая сборку: .on('error', function (err) { console.error('WEBPACK ERROR', err); this.emit('end'); // Don't stop the rest of the task }) Полезные ссылки: 🤍 - исходники из видео на GitHub 🤍 - сайт node.js 🤍 - сайт gulp 🤍 - по настройке webpack-stream Использованные плагины: 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #gulp #верстка

#1 Gulp сборка проекта | babel, eslint, browser-sync

6654
213
62
00:32:47
15.02.2021

Материалы урока Код: 🤍 npm i gulp 🤍babel/register 🤍babel/core 🤍babel/preset-env eslint eslint-config-airbnb-base eslint-plugin-import 🤍babel/eslint-parser husky lint-staged del browser-sync save-dev Ссылки урока EditorConfig: 🤍 gulp: 🤍 npm 🤍babel/register: 🤍 babeljs 🤍babel/register: 🤍 babeljs 🤍babel/preset-env: 🤍 eslint: 🤍 плагины eslint для редактора: 🤍 eslint-config-airbnb-base: 🤍 eslint-plugin-import: 🤍 🤍babel/eslint-parser: 🤍 husky: 🤍 lint-staged: 🤍 Ошибка eslint should be listed in the project's dependencies, not devDependencies: 🤍 browser-sync: 🤍 browser-sync gulp: 🤍 browser-sync options: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 Музыка Digital Technology Background [Corporate Music] by MOKKA / Security 🤍 #gulp #eslint #babel Таймкоды: 0:00 Интро 0:41 Создание git-репозитория 1:10 Настройка editorconfig 2:52 Установка npm 4:39 Установка gulp 8:51 Установка eslint 13:11 Создание папок проекта 14:17 Настройка config 17:26 gulp watch, gulp build 19:03 Установка husky 19:58 Установка lint-staged 21:48 Настройка clean 26:36 Настройка browser-sync

#5 Gulp сборка проекта | assets, images, svg-sprite

3545
101
34
00:30:35
01.03.2021

Материалы урока Код: 🤍 npm i gulp-changed gulp-imagemin imagemin-webp imagemin-pngquant gulp-svg-sprite save-dev Ссылки урока when using lastRun new files are skipped: 🤍 gulp-changed: 🤍 gulp-imagemin: 🤍 optipng: 🤍 imagemin-webp: 🤍 imagemin-pngquant: 🤍 gulp-svg-sprite: 🤍 svg-sprite configuration: 🤍 svgo: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #imagemin #svg-sprite Таймкоды: 0:00 Интро 0:14 Таск assets 1:02 Перенос шрифтов 2:24 Перенос видео 3:40 Перенос изображений 6:25 gulp-debug 7:14 gulp lastRun 9:36 gulp-changed 12:15 Оптимизация изображений 14:07 imagemin-pngquant 17:03 Перевод изображений в webp 19:45 Настройка svg спрайтов 24:39 Оптимизация svg через svgo 27:28 Как стилизовать svg в спрайте

#2 Gulp сборка проекта | javascript

2079
63
31
00:12:02
18.02.2021

Материалы урока Код: 🤍 npm i browserify babelify vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps gulp-if save-dev Ссылки урока browserify: 🤍 babelify: 🤍 gulp + browserify: 🤍 npm vinyl-buffer: 🤍 gul-uglify: 🤍 gulp-sourcemaps: 🤍 gulp-if: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp #javascript #js Таймкоды: 0:00 Интро 0:14 Настройка scripts 1:35 Установка browserify 4:49 Преобразование в vinyl-stream 6:12 Установка gulp-uglify и gulp-sourcemaps 8:42 Настройка gulp-if 11:01 Обработка ошибок browserify

Вебинар по БЭМ: сборка проекта с помощью gulp

4965
57
9
01:12:06
29.09.2016

На вебинаре вы научитесь собирать с помощью gulp и модулей gulp-bem (🤍 любые БЭМ-проекты: начнем с простых статичных HTML-страничек для верстки по макету. Ссылки: - 🤍 — репозиторий с кодом из вебинара - 🤍 — заготовка для сборки страниц - 🤍 — заготовка с gulp

HTML верстка реального заказа Upwork. Моя СУПЕР gulp сборка. #upwork

19799
593
96
02:18:32
16.03.2021

В данном ролике продолжаю тему Upwork и хочу показать выполнение реального заказа по HTML верстке сайта при помощи моей супер сборки gulp. Так же тут используется препроцессор scss. Это видео я снял исключительно для того, что бы продемонстрировать возможности своей gulp сборки на реальном проекте. #gulp #upwork #scss #html #freelance #фриланс #верстка 🔴 Данная сборка + инструкция уже ДОСТУПНА на Patreon: 🤍 👉 Первое видео про Upwork: 🤍

НОВАЯ GULP СБОРКА ! РОЗЫГРЫШ! ДАРЮ ЭТУ СБОРКУ ПОДПИСЧИКАМ НА НОВЫЙ ГОД! GULP #gulp

9137
359
90
00:44:56
25.12.2021

Друзья! В честь моего долгого отсутствия и конечно же Нового Года хочу поделиться с вами своей новой версией Gulp сборки. Проведу розыгрыш и подарю вам эту сборку ! Детали розыгрыша в видео и так же чуть ниже в описании. 🔴 Приобрести эту собрку прямо сейчас можно на Patreon: 🤍 🏆 Так же поддержать канал можно в крипте(сборку как благодарность скину): 👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96 👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822 👉 Binance Pay: 432902886 🔴 Что бы получить данную сборку бесплатно нужно: 1) Быть подписанным на канал. 2) Поставить лайк этому видео. 3) Написать комментарий о том, как вы будете отмечать новогодние праздники и ОБЯЗАТЕЛЬНО указать почту, по которой я смогу с вами связаться! 🔴 Результат будет 28.12.2021 ⏱️ Тайм-коды: ⏱️ 00:00 Базовый обзор сборки 05:00 Подключаем компоненты. Компонент Навбар. 14:23 Компонент Аккордеон. 18:12 Компонент Фильтр. 20:53 Компоненты Радиокнопок и Чекбоксов. 24:00 Компонент Модального Окна. 26:21 Компонент Табов. 28:54 Компонент Select. 31:28 Смотрим папку build. 35:25 Сжимаем картинки. 36:10 Маска ввода телефона. Интересные ролики, можете посмотреть на досуге: 👉 Урок по MERN Stack: 🤍 👉 Урок по NEXT.js: 🤍 📨 По любым вопросам можете писать в Instagram: 🤍

Установка готовой сборки Gulp 4 на Windows и MacOS, используя Chocolatey и Homebrew

18157
435
104
00:16:15
07.08.2019

На сайте есть готовая сборка 🤍 которая помогает многим. Но у некоторых всё же возникают вопросы по поводу установки под разные системы. Это видео поможет решить многие вопросы. Рекомендую посмотреть установку для двух систем, т.к. в Windows я демонстрирую установку на компьютер, на котором еще не был установлен ранее Git и NodeJS, а в разделе про MacOS - показываю внутреннее содержание файлов в редакторе кода. Github репозиторий сборки — 🤍 Купить ежедневник Frontend Book — 🤍 Задать вопрос фронтендеру бесплатно — 🤍 Сайт — 🤍 ВК — 🤍 Instagram — 🤍 Telegram — 🤍 Чат Telegram — 🤍 Курсы и марафоны — 🤍 Отзывы - 🤍

Уроки Gulp.js #8 | Сборка и продакшен проекта

6620
120
27
00:06:50
09.02.2017

ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍 Мой заработок на YOUTUBE - ►🤍

Митап по БЭМ — сборка БЭМ-проекта, сборка с Gulp

2383
39
1
00:51:30
18.04.2017

Роль сборки в БЭМ-проектах - сборка — обработка и объединение файлов, - нужна для удобства и производительности, не обязательна - в БЭМ проектах сборка помогает реализовать принципы методологии: разделение на блоки, учет зависимостей, переопределение по уровням - сборка почти всегда обязательна + те же бонусы: удобство и производительность Основные понятия - бандлы и декларации - зависимости - уровни переопределения и декларативность технологий

Верстка страниц с использованием Gulp ➤ Установка Gulp. Настройка рабочего окружения

1527
33
7
00:23:44
17.06.2022

Промокод на скидку 15% на все курсы ITVDN- 4YOUTUBE Полный видеокурс - 🤍 Цель урока - познакомиться с описанием курса, настроить рабочее окружение. Создать таск для Gulp для проверки корректности установки и отсутствия ошибок. Gulp – это специальный инструмент, таск менеджер, позволяющий автоматизировать и ускорить выполнение множества рутинных задач разработки, с которыми каждый день приходится сталкиваться при создании веб-сайта. Данный курс поможет вам в теории и на практике изучить возможности применения Gulp, начиная от основ использования и базовых правил, заканчивая рассмотрением более сложных структур. Проходя уроки курса, вы шаг за шагом познакомитесь со всеми возможностями Gulp API. Вы пройдете через весь процесс создания страницы, от создания репозитория для хранения проекта, через создание gulpfile.js для структуры проекта, подготовку макета сайта в Figma, обеспечение структуры страницы в html, добавление стилей к существующей странице и скриптов в проект, к итоговому результату - упаковке проекта и деплою на сервисе netlify. По прохождению курса вы будете разбираться в основах работы тасков и их создании, а также узнаете возможности библиотек, которые работают с GulpJs. Если вы еще не знакомы с GulpJs, или хотите больше разобраться в работе тех или иных методов, то данный курс поможет вам в этом. #gulp #ITVDN

Мануал по работе со сборкой Easy-webdev-startpack 💣 На базе Gulp-4 Другая сборка тебе не нужна!

4512
212
57
00:28:09
12.01.2021

Мануал по работе с моей сборкой. Как начать проект, как пользоваться плагинами и миксинами, вшитыми в сборку, какая файловая система. 👨🏼‍💻 Ссылка на сборку: 🤍 💬 Ссылка на канал в телеграмме: 🤍 💻 Ссылка на GitHub: 🤍 🤑 Поддержать: https://css_notes.diaka.ua/donate

#8 Gulp сборка проекта | Базовые настройки шаблонов

2052
61
41
00:19:41
15.03.2021

Материалы урока Код: 🤍 npm i pug-include-glob save-dev Ссылки урока pug-include-glob: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp #pug Таймкоды: 0:00 Интро 0:29 Настройка browserslist 1:11 Создание базовой разметки 7:31 Объявление переменных страницы 9:10 Подключение файлов через pug-include-glob 10:25 Создание миксина icon-mono 12:00 Создание миксина icon-multi 12:24 Создание миксина imgLazy 14:40 Создание миксина img 17:50 Создание миксина img2x

#7 Gulp сборка проекта | Организация стилей

1503
48
24
00:23:55
11.03.2021

Материалы урока Код: 🤍 npm i normalize.css smart-grid save npm i import-fresh gulp-sass-glob save-dev Ссылки урока normalize.css: 🤍 focus-visible: 🤍 smart-grid: 🤍 smart-grid-config: 🤍 import-fresh: 🤍 styles variables: 🤍 сниппет для vs code: 🤍 gulp-sass-glob: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp #sass Таймкоды: 0:00 Интро 0:20 Подключение normalize.css 1:25 Добавление node_modules в path для sass 2:10 Подключение smart-grid 7:32 Подключение import-fresh 9:04 Добавление переменных 10:56 Добавление функций 12:05 Добавление миксинов 13:43 Добавление сниппета для медиа выражения 14:36 Добавление базовых стилей 18:53 Стили для focus-visible 20:46 Добавление layout 21:35 Добавление components 22:31 Подключение gulp-sass-glob

Gulp и webpack - как и зачем подружить системы сборки проекта

18337
777
33
01:43:02
20.03.2019

Плюсы и минусы Gulp. Плюсы и минусы Webpack. Совместное использование сборщиков. Работа с gulp и webpack-stream. Курс по js - 🤍

Опыт сборки проекта Gulp

339
5
0
00:18:10
16.08.2018

Шаблон сборки проектов с помощью Gulp. Используется и совершенствуется во многих наших проектах. Описание: 🤍 Страница во ВКонтакте: 🤍 Страница в Facebook: 🤍

#4 Gulp сборка проекта | sass, stylelint

2075
55
17
00:18:26
25.02.2021

Материалы урока Код: 🤍 npm i gulp-sass gulp-autoprefixer gulp-group-css-media-queries gulp-clean-css stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-rational-order save-dev Ссылки урока gulp-sass: 🤍 gulp-autoprefixer: 🤍 gulp-group-css-media-queries: 🤍 gulp-clean-css: 🤍 plugins with gulp sourcemaps support: 🤍 stylelint: 🤍 stylelint-config-standard: 🤍 stylelint-config-rational-order: 🤍 stylelint-order: 🤍 gulp-rename: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #sass #scss #styelint Таймкоды: 0:00 Интро 0:13 gulp-sass 3:38 gulp-autoprefixer 5:39 gulp-group-css-media-queries 6:29 gulp-clean-css 7:54 gulp-rename 8:50 gulp-sourcemaps 12:09 stylelint 14:01 stylelint-order 17:05 Добавляем stylelint в lint-staged

#9 Повторное использование сборки Gulp - Курс по Gulp 4 [2021]

1073
61
21
00:13:36
21.12.2021

В этом уроке я покажу как можно загрузить свой код сборки на GitHub и как повторно использовать однажды написанный код Gulp в любых ваших проектах. Вам не обязательно уметь работать с Git и GitHub вы можете просто использовать код из моего репозитория. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Скачать сборку Gulp на GitHub: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍

#0 Базовая сборка Gulp для участников марафона

2183
73
13
00:05:44
09.01.2022

Исходники к видео: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 Присоединяйся и ты!

Сборка проекта на Gulp 4, Подробный видео урок по сборщику Gulp, Уроки по сборщику Gulp 4

33566
1460
290
01:22:27
01.03.2019

Сборка проекта на Gulp 4, Подробный видео урок по сборщику Gulp, Уроки по сборщику Gulp 4. Я покажу вам как сделать Сборку проекта на Gulp 4, в этом видео уроке по сборщику Gulp мы узнаем как объединять файлы с помощью gulp-concat, добавлять префиксы в CSS, проводить минификацию CSS и JS кода, настраивать синхронизацию с браузером. А так же я покажу вам как запускать готовую сборку проекта на Gulp 4 повторно при работе над новым проектом и не создавать всё заново. Содержание: 00:00 Установка Gulp 4 14:12 Объединение файлов gulp-concat 31:32 Автопрефиксы в CSS, плагин css-autoprefixer 37:33 Минификация CSS, плагин css-clean 43:39 Минификация JS, плагин css-uglify 49:41 Очистка папки build, плагин del 53:40 Синхронизация с браузером и gulp watch 01:06:15 Тесты сборки на Gulp 01:11:37 Повторное использование сборки на Gulp 4 Плагин gulp-sass обновился, в связи с этим немного изменился принцип его подключения. Для корректной работы таска styles нужно дополнительно установить пакет sass: npm i sass save-dev и заменить способ подключения с: const sass = require('gulp-sass'); на: const sass = require('gulp-sass')(require('sass')); ✔Советую посмотреть: Репозиторий со сборкой Gulp: 🤍 Плейлист Уроки по сборщику Gulp 4: 🤍 Урок по JS в одном видео: 🤍 Видео курс по JS: 🤍 Sass через Gulp: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp #gulp4 #itdoctor #обучение #gulpsass #gulpless #gulpbuild

#3 Gulp сборка проекта | pug, pug-linter

1847
49
12
00:12:39
22.02.2021

Материалы урока Код: 🤍 npm i gulp-pug gulp-plumber 🤍zoxon/emitty pug-lint save-dev Ссылки урока gulp-pug: 🤍 gulp-plumber: 🤍 emitty: 🤍 🤍zoxon/emitty: 🤍 пример emitty: 🤍 pug-lint: 🤍 настройки pug-lint: 🤍 Инкрементальная компиляция Pug-файлов: 🤍 Инкрементальная компиляция с emitty: 🤍 Связь со мной Привет! Меня зовут Дмитрий Бердников, я frontend-разработчик. На канале делюсь знаниями по веб-разработке. VK: 🤍 Telegram: 🤍 #gulp #pug #pug-lint Таймкоды: 0:00 Интро 0:14 gulp-pug 3:36 gulp-plumber 4:31 emitty 9:33 pug-lint

Gulp vs webpack, сравнение, что использовать для верстки?

18164
1645
161
00:13:51
28.07.2021

Друзья, в данном видео отвечу на частый вопрос своих подписчиков, кто круче: gulp или webpack ? =) Что использовать в 2021 году. Устарел ли gulp? И почему в этой теме так много кипиша) Ссылка на телеграм канал: 🤍 Ссылка на телеграм канал с впн: 🤍 Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке. Вк канала: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍

Обновление сборки Gulp. Видеоинструкция

5949
278
79
00:25:24
02.02.2021

Привет! В этом видео расскажу об изменениях в своей сборке gulp и покажу, как лучше ей пользоваться. 🤍 - ссылка на сборку 🤍 - ссылка на руководство по Gulp Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #ityoutubersru #верстка #gulp

Frontend марафон | Настройка GULP 2022 | День 1

1546
55
4
03:28:54
04.04.2022

Присоединиться к марафону — 🤍 ВКонтакте: 🤍 Telegram: 🤍 00:00 Музыка 07:40 Начало #HTML #CSS #JavaScript SCSS EcmaScript ES6 gulp webpack

Назад
Что ищут прямо сейчас на
gulp сборка проекта Shimoroshow Ledger Nano X nemo munky julianalvarezmilan nhạc flo 1hour android app for shopify постоянный ток حنان، حنان freddie Mercury как играть за тому милфу DaVinci Resolve Media Offline Cherie Deville suasana di pedesaan spring framework full course sewer drain blocked jacky gosee bandiraw FX AUDIO DAC X6 MKII