Одну секунду
Что-то сучилось. Попробуйте еще раз.
Gulp настройка проекта смотреть последние обновления за сегодня на .
Это максимально подробный большой видеоурок по настройке с нуля 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 – это менеджер задач и сборщик проектов. Что умеет 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 #фрилансерпожизни 🤟 Живи, а работай в свободное время! ©
Промокод на скидку 15% на все курсы ITVDN- 4YOUTUBE Полный видеокурс - 🤍 Цель урока - познакомиться с описанием курса, настроить рабочее окружение. Создать таск для Gulp для проверки корректности установки и отсутствия ошибок. Gulp – это специальный инструмент, таск менеджер, позволяющий автоматизировать и ускорить выполнение множества рутинных задач разработки, с которыми каждый день приходится сталкиваться при создании веб-сайта. Данный курс поможет вам в теории и на практике изучить возможности применения Gulp, начиная от основ использования и базовых правил, заканчивая рассмотрением более сложных структур. Проходя уроки курса, вы шаг за шагом познакомитесь со всеми возможностями Gulp API. Вы пройдете через весь процесс создания страницы, от создания репозитория для хранения проекта, через создание gulpfile.js для структуры проекта, подготовку макета сайта в Figma, обеспечение структуры страницы в html, добавление стилей к существующей странице и скриптов в проект, к итоговому результату - упаковке проекта и деплою на сервисе netlify. По прохождению курса вы будете разбираться в основах работы тасков и их создании, а также узнаете возможности библиотек, которые работают с GulpJs. Если вы еще не знакомы с GulpJs, или хотите больше разобраться в работе тех или иных методов, то данный курс поможет вам в этом. #gulp #ITVDN
Готовая сборка 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". Остались вопросы? Пишите в комментарии! Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте 🤍 Здесь вы найдете подробные интерактивные курсы по веб-разработке.
Получить профессию Frontend разработчика - 🤍 Подробнее узнать об обучении в Result School - 🤍 Бесплатный курс HTML & CSS - 🤍 Сделать 5 проектов на JavaScript - 🤍 Я в соц сетях: Telegram: 🤍 VK: 🤍 Instagram: 🤍 Мои паблики по JavaScript: Telegram: 🤍 VK: 🤍 Instagram: 🤍 JavaScript cообщества: Discord: 🤍 Telegram: 🤍 Roadmap по каналу: 🤍
Друзья, в данном видео отвечу на частый вопрос своих подписчиков, кто круче: gulp или webpack ? =) Что использовать в 2021 году. Устарел ли gulp? И почему в этой теме так много кипиша) Ссылка на телеграм канал: 🤍 Ссылка на телеграм канал с впн: 🤍 Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке. Вк канала: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
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
Курс: 🤍 Все курсы: 🤍 Телеграмм: 🤍 Позиционирование элементов в html.
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-сборки (готовые сниппеты, плагины, модули с готовым кодом и т.д.). В общем, покажу, как я сам делаю проекты и что использую. Поехали! Сборка: 🤍 Макет: 🤍 Готовый код: 🤍 Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #gulp #верстка
🤟 Донат на ЗСУ можно сделать по этой ссылке : 🤍 🏆 Поддержать канал можно на Patreon: 🤍 🔹 Как благодарность за поддержку на Patreon вы получите мою сборку Gulp: 🤍 🏆 Так же поддержать канал можно в крипте(сборку как благодарность скину): 👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96 👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822 👉 Binance Pay: 432902886 ⏱️ Тайм-коды: ⏱️ 00:00 вступление 01:30 установка пакетов, старт работы 03:00 обзор scss файлов 07:00 обзор js файлов и способы подключения сторонних библиотек 10:15 обзор базовых html файлов 10:43 компоненты(+подключение) 11:35 компонент Хедер (адаптивное меню) 15:10 компонент Аккордеона(спойлеры) 19:02 компонент Счетчик 21:22 компоненты инпутов (кастомный checkbox и radio button) 23:26 компонент модального окна 25:35 компонент маски ввода телефона 27:44 компонент Select (кастомный селект) 32:22 компонент пошаговой формы 34:40 компонент Swiper слайдера 36:40 компонент Switch (переключатель) 38:16 компонент Табов 39:26 обзор production версии сайта 48:19 Почему сборка редко обновляется и так мало компонентов? 50:39 Как получить эту сборку? ✅ Использую сборку на реальном проекте: 👉 🤍 👉 🤍 👉 🤍 📨 Сотрудничество ► timoschuk.roman🤍gmail.com 📨 Business inquiries ► timoschuk.roman🤍gmail.com
Gulp Sass плагин установка и настройка плагина в уроке по Gulp 4. В этом уроке мы установим плагин Gulp Sass и настроим его для компиляции кода написанного на препроцессоре Sass. В Gulp 4 работа с Sass очень проста. Установка плагина Gulp Sass и настройка Gulp Sass выполняется очень быстро и я покажу как установить и настроить Gulp Sass. Это бесплатная версия курса Планировщик задач Gulp 4. Все уроки будут доступны для просмотра без ограничений в плейлисте с соответствующим названием на моем канале. Чтобы получить дополнительные материалы и доступ к тестовые задания необходимо приобрести данный курс на Udemy или Stepik. Приобрести весь курс Планировщик задач Gulp 4 прямо сейчас На Udemy: 🤍 На Stepik: 🤍 Плейлист Планировщик задач Gulp 4: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍
Присоединиться к марафону — 🤍 ВКонтакте: 🤍 Telegram: 🤍 00:00 Музыка 07:40 Начало #HTML #CSS #JavaScript SCSS EcmaScript ES6 gulp webpack
- В прошлый раз было первое знакомство с bootstrap, сегодня устанавливаем его как зависимость и начинаем пользоваться только необходимым. - Разметка главной страницы
Материалы урока Код: 🤍 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
В данном видео хочу продемонстрировать свою сборку для верстки сайтов. Данные сборки позволяют здорово экономить время за счет того, что выполняют за нас некоторые рутинные задачи. Например, компиляция препроцессорами 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 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 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 Конец Подпишитесь на канал, если вам понравилось данное видео: 🤍
Материалы урока Код: 🤍 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
Привет! В современном мире веба трудно представить себе ситуацию, чтобы человек сам делал рутинные задачи, на которые уходит уйма времени. Конечно, для нас, ленивых разработчиков, придумали специальные системы сборки, одной из которых является 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 #верстка
Установка Node.js и настройка Gulp 4 с плагинами для ускорения разработки. Gulp-sass, browsersync. .... Это видео было записано в результате того, что в какой-то момент моя сборка gulp перестала работать на новом пк. Оказалось, что вышла 4 версия и по умолчанию стала устанавливаться она. А синтаксис был изменен, и мне пришлось настраивать свой Gulpfile снова. .... Посмотрев большое количество роликов в интернет, я увидел, что видео на такую тему встречаются очень редко, а нужная мне конфигурация не затрагивалась вообще никем. И я принял решение познакомить новичков с новой версией этого такс менеджера. .... Ставь паузу и переписывай код с экрана или воспользуйся этим кодом: 🤍 Ссылка на сайт с плагинам: 🤍 Я обучаюсь программированию тут: 🤍 .... Не забудь поставить свой лайк этому видео, если оно было полезным и подписывайся на канал. .... Добавляйся ко мне в друзья в других социальных сетях: VK: 🤍 instagram: 🤍 Facebook: 🤍 Youtube: 🤍
Компиляция Sass и Scss файлов через сборщик Gulp - это универсальный способ как компилировать файлы препроцессора Sass. В этом видео я покажу вам как настроить компиляцию препроцессора Sass через сборщик Gulp. Для этого нам понадобиться NPM - менеджер пакетов, входящий в состав node.js. Мы установим несколько модулей для компиляции Sass в CSS. Так же я расскажу зачем нужен gulp-sourcemaps и gulp-watch. Плагин gulp-sass обновился, в связи с этим немного изменился принцип его подключения. Для корректной работы таска styles нужно дополнительно установить пакет sass: npm i sass save-dev и заменить способ подключения с: const sass = require('gulp-sass'); на: const sass = require('gulp-sass')(require('sass')); ✔Команды для NPM установка модулей для Gulp npm i gulp npm init npm i gulp-sass gulp-sourcemaps gulp-watch SD ✔Советую посмотреть: Плейлист Уроки по сборщику Gulp 4: 🤍 Препроцессор Sass Установка: 🤍 Препроцессор Sass Синтаксис: 🤍 Основы препроцессора Sass: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #gulp #gulp4 #itdoctor #обучение #gulpsass #gulpless #gulpbuild
В видео расскажу о настройке сборщика gulp. Этот инструмент помогает экономить время разработчику, не отвлекая его внимание на рутинные задачи. Полезные ссылки: 🤍 - ссылка на результаты урока, готовые файлы gulpfile.js и package.json; 🤍 - сайт npm, где можно найти необходимые плагины и прочитать документацию; 🤍 - сайт для скачивания nodejs
Плюсы и минусы Gulp. Плюсы и минусы Webpack. Совместное использование сборщиков. Работа с gulp и webpack-stream. Курс по js - 🤍
В скринкасте продемонстрировано выполнение локальной инсталляции Gulp в веб проект. Описаны все шаги процесса - подготовка к установке, создание структуры каталогов, выбор директории для локальной установки Gulp, инициализация Node.js проекта, установка Gulp, настройка вызова Gulp в терминале через редактирование системной переменой PATH, написание задач Gulp в разных каталогах проектов сайтов. Текстовой вариант смотрите на сайте Andew.ru по ссылке: 🤍 Полезные ссылки: Установка MySQL 5.7 в Windows 🤍 Установка Apache на Windows 🤍 Установка PHP7 на Windows 🤍 Как организовать среду для web разработки 🤍 СОДЕРЖАНИЕ: О теме скринкаста 00:04 Общее описание Gulp и Node.js 00:10 Выбор каталога для локальной установки Gulp 02:35 Подготовка к инсталляции Gulp 04:34 Инициализация проекта Node.js 04:57 Файл package.json 06:47 Выполнение локальной установки Gulp 07:37 Настройка запуска Gulp в терминале 10:03 Настройка системной переменной PATH в Windows 11:05 Файл package.json после установки Gulp 12:05 Создание и запуск задач Gulp, gulpfile.js файл задач 12:55 Резюме по скринкасту 19:05 Автор: Андрей Болдырев 🤍
Github - 🤍 Поддержать автора - 🤍 Блог автора - 🤍 Видео на тему настройки рабочей среды в gulp 4
В этом видео мы начнём верстать крутой лендинг с нуля на HTML, Sass, JS и Gulp. Мы будем использовать самые последние технологии верстки и я покажу вам как верстать в разы быстрее. Видео расчитано для практики верстки. Ссылка на макет: 🤍 Исходники: 🤍 Node.js: 🤍 Шрифты: 🤍 Команда для установки Gulp: npm install global gulp-cli Подпишитесь на канал чтобы получить больше полезного контента: 🤍 Блог в инстаграм где буду делиться жизнью: 🤍 Блог на английском про саморазвитие: 🤍 Связаться со мной: 🤍 Содержание: 00:00 - 02:56 - Вступление 02:56 - 05:52 - Подготовка шрифтов и изображений 05:52 - 12:52 - Начало верстки - Provided by Lofi Girl - Watch: 🤍
В этом уроке я покажу как установить Gulp в ваш проект и начать им пользоваться. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍 Мой заработок на YOUTUBE - ►🤍
Подпишись на мой Telegram: 🤍 Больше контента в моем Boosty: 🤍 Полный курс по Webpack на моем канале: 🤍 Webpack За 2 минуты вы узнаете: - что такое Webpack - как собирать Prod & Dev сборки - как работают плагины - что такое loaders - настройка Webpack Dev Server Подпишись на мои соц сети: Telegram: 🤍 VK: 🤍 Instagram: 🤍 Соц сети по JavaScript: Telegram: 🤍 VK: 🤍 Instagram: 🤍 JavaScript cообщества: Discord: 🤍 Telegram: 🤍 Roadmap по каналу: 🤍
В этом видео разбираемся с тем, что такое таск-раннер (task-runner) и бандлер (bundler), а так же на примере Gulp 4, последней версии на данный момент, делаем установку и пишем несколько задач. Здравствуйте, друзья. Мы продолжаем публиковать уроки веб программирования. Я думаю, вы уже знаете, что такое фронтенд и бэкенд разработка. Имеете понимание про создание сайта верстка и разделяете этапы верстки сайта. Сейчас я вам расскажу, что такое Taskrunner (Таскраннер.) Разберем, что такое gulp и зачем он нужен. Как с ним работать, как установить gulp, как настроить gulp 4 и что такое gulp верстка. В общем разберем все вопросы связанные с gulp 4 для начинающих. В ссылках в описании найдете gulp 4 инструкция. Если вам будет интересно узнать больше - пишите в комментарии, возможно мы сделаем gulp 4 уроки, = Node.js - 🤍 = Бандлеры и таскраннеры: Gulp - 🤍 Grunt - 🤍 Broccoli - 🤍 Webpack - 🤍 Parcel - 🤍 Rollup - 🤍 Brunch - 🤍 = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍
Публикация проекта в gh-pages при помощи интерфейса github и сборщика gulp.
Шаблон сборки проектов с помощью Gulp. Используется и совершенствуется во многих наших проектах. Описание: 🤍 Страница во ВКонтакте: 🤍 Страница в Facebook: 🤍
Привет! В этом видео расскажу, что изменилось в моей сборке 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 4, компилируем scss в css. Пишем свои задачи под gulp. Создаем gulp watch для автоматической сборки scss стилей.
В видео верстаю многостраничний сайт. Всего сверстаем 6 страниц, использую GULP сборку, все пишу на SCSS использую БЭМ методолигию Макет: 🤍 Gulp сборка: 🤍 Мой курс по верстке - 🤍 Видос по Gulp: 🤍 Видос по препроцессору: 🤍 Видео по checkbox: 🤍 Гриды: 🤍 Тема в VSC - плагин Material Theme Ссылка на телеграм канал: 🤍 Ссылка на телеграм канал с впн: 🤍 Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке. Вк канала: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
Материалы урока Код: 🤍 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
Материалы урока Код: 🤍 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
Сборщик проектов Gulp. Поможет сохранить время и увеличить производительность. В прошлом видео мы установили npm, gulp, nodejs. В данном мы рассмотрим: сжатие изображений с помощью gulp-imagemin. Ссылка на github gulp проекта: 🤍
В текущем уроке Вы узнаете, как установить утилиты Node.js и Gulp CLI глобально на ваш компьютер. Вкратце рассмотрена структура файлов и папок, инициализация проекта, и установка всех необходимых модулей для дальнейшей работы.
.svg){kind=small}
![#18 Gulp Sass плагин установка - Курс по Gulp 4 [2021]](https://i.ytimg.com/vi/RZ5WJro4Reo/mqdefault.jpg "#18 Gulp Sass плагин установка - Курс по Gulp 4 [2021]")
