Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

Подробная инструкция по созданию своей сборки на Gulp 4. Необходимый минимум для комфортной верстки

Автор: FrontCoder

Загружено: 2021-05-29

Просмотров: 7548

Описание:

Что такое Gulp? Это таск менеджер для выполнения часто используемых задач. Преобразование pug в html, scss в css, typescript в javascript. Оптимизация картинок. Создание спрайтов на лету. Минификация файлов и многое другое. Все то, что вы делали когда-то вручную теперь будет сделано за вас!
В данном видео мы с вами научимся создавать любую сборку на gulp 4. Подключать любые плагину и работать с gulp4 на все 100 процентов.

NodeJS - https://nodejs.org/en/
Gulp - https://gulpjs.com/
NPM - https://www.npmjs.com/
SVG спрайты http://glivera-team.github.io/svg/201...

Марафон LoftSchool
Сайт https://loftschool.com/marathons/welc...
Записаться https://t.me/joinchat/nW6Oqyg3IM0yNDNi

Содержание:
00:00 - Вступление
04:05 - npm init
04:46 - Создание package.json
06:50 - Первый таск
09:20 - Пишем задачу pug2html
10:38 - Первый запуск Gulp
17:20 - Мини курс по pug
27:25 - Пишем обработку стилей
47:20 - Работа с JavaScript
55:50 - BrowserSync
01:10:15 - Минификация картинок
01:18:55 - SVG спрайты
01:30:40 - Подключаем normalize.css
01:35:30 - Обработка шрифтов
01:41:40 - Подключене библиотек к сборке
01:54:10 - Dev и build сборка
01:59:10 - Спасибо!

-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта #10. PSD 2 HTML . Верстка сайта по продаже строительных материалов - http://bit.ly/2kIF3Ov
Chrome DevTools - http://bit.ly/33IfApM
Учим программирование через игры - http://bit.ly/2CEGkvq
Верстка интернет - магазина - http://bit.ly/2CvE75h
Собери свою сборку на gulp4 - http://bit.ly/32IwCTa
Секреты Frontend Разработчика - http://bit.ly/2X7a3X6
Практикум JavaScript - http://bit.ly/2DPk3LK
Основы JavaScript - http://bit.ly/2Rr7rT4

-----------------------------------------------------------------------------------
✅ ВК —https://vk.com/frontcoder
✅ Telegram — https://t.me/frontcoderchannel
✅ Чат Telegram — https://t.me/frontcoder
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

Подробная инструкция по созданию своей сборки на Gulp 4. Необходимый минимум для комфортной верстки

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(20) { ["Hh1aDoWMJXA"]=> object(stdClass)#9023 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "Hh1aDoWMJXA" ["related_video_title"]=> string(89) "Gulp 2024, полное руководство, современный синтаксис" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> NULL } ["pLtHyLlLt4Y"]=> object(stdClass)#9032 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "pLtHyLlLt4Y" ["related_video_title"]=> string(76) "Как Сбежать Из Тюрьмы С Помощью Инженерии" ["posted_time"]=> string(21) "1 день назад" ["channelName"]=> NULL } ["jx23OGkvizA"]=> object(stdClass)#9021 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "jx23OGkvizA" ["related_video_title"]=> string(171) "На вершину горы за 6 часов - самая экстремальная мотогонка в мире - Данила Черняев на мотоцикле" ["posted_time"]=> string(19) "2 дня назад" ["channelName"]=> NULL } ["jU88mLuLWlk"]=> object(stdClass)#9018 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "jU88mLuLWlk" ["related_video_title"]=> string(176) "GULP 2022 установка настройка плагины. Подробный курс по настройке галпа для быстрой сборки проекта" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> NULL } ["8M_Nx7qG9ks"]=> object(stdClass)#9015 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "8M_Nx7qG9ks" ["related_video_title"]=> string(41) "Готовим Gulp для проекта" ["posted_time"]=> string(19) "5 лет назад" ["channelName"]=> NULL } ["ddbxsrGPRY0"]=> object(stdClass)#9029 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "ddbxsrGPRY0" ["related_video_title"]=> string(109) "Слайдер SWIPER. Подробный курс. Подключение настройка примеры." ["posted_time"]=> string(21) "4 года назад" ["channelName"]=> NULL } ["jjqvl0M0tGw"]=> object(stdClass)#9019 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "jjqvl0M0tGw" ["related_video_title"]=> string(105) "Компиляция SASS и SCSS через Gulp сборщик, Уроки по сборщику Gulp 4" ["posted_time"]=> string(19) "6 лет назад" ["channelName"]=> NULL } ["3RmOvxilbPM"]=> object(stdClass)#9024 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "3RmOvxilbPM" ["related_video_title"]=> string(63) "100 Человек Vs Самая Большая Ловушка!" ["posted_time"]=> string(21) "8 дней назад" ["channelName"]=> NULL } ["zZBiln_2FhM"]=> object(stdClass)#9009 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "zZBiln_2FhM" ["related_video_title"]=> string(46) "Git и GitHub Курс Для Новичков" ["posted_time"]=> string(19) "5 лет назад" ["channelName"]=> NULL } ["lr1rYnUubpQ"]=> object(stdClass)#9030 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "lr1rYnUubpQ" ["related_video_title"]=> string(69) "Docker Для Начинающих за 1 Час | Docker с Нуля" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> NULL } ["ODl2iCkIPpg"]=> object(stdClass)#9022 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "ODl2iCkIPpg" ["related_video_title"]=> string(143) "Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> NULL } ["fgJmCevEtL4"]=> object(stdClass)#9028 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "fgJmCevEtL4" ["related_video_title"]=> string(70) "Свежий взгляд на Gulp: функции и ES-модули" ["posted_time"]=> string(19) "5 лет назад" ["channelName"]=> NULL } ["HTi6w_-Ve-A"]=> object(stdClass)#9016 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "HTi6w_-Ve-A" ["related_video_title"]=> string(83) "Вот почему Прибалтика войдёт в состав России!" ["posted_time"]=> string(21) "1 день назад" ["channelName"]=> NULL } ["GcXC8a8oL4I"]=> object(stdClass)#9014 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "GcXC8a8oL4I" ["related_video_title"]=> string(110) "Как писать код с ИИ: советы от разработчика с 25-летним стажем" ["posted_time"]=> string(21) "1 день назад" ["channelName"]=> NULL } ["DziNggPSyyQ"]=> object(stdClass)#9012 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "DziNggPSyyQ" ["related_video_title"]=> string(100) "Как Ubuntu Предала Linux - Вся Правда о Взлёте и Падении Canonical" ["posted_time"]=> string(25) "3 недели назад" ["channelName"]=> NULL } ["nxCLXMBl4e4"]=> object(stdClass)#9013 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "nxCLXMBl4e4" ["related_video_title"]=> string(150) "VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение" ["posted_time"]=> string(19) "5 лет назад" ["channelName"]=> NULL } ["6KfQIUghtOs"]=> object(stdClass)#9010 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "6KfQIUghtOs" ["related_video_title"]=> string(118) "Установка готовой сборки Gulp 4 на Windows и MacOS, используя Chocolatey и Homebrew" ["posted_time"]=> string(19) "6 лет назад" ["channelName"]=> NULL } ["qSZvGlIKGPg"]=> object(stdClass)#9011 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "qSZvGlIKGPg" ["related_video_title"]=> string(161) "Gulp сборка 2023 с нуля | Установка настройка и запуск — полный курс по Gulp для верстки сайтов" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> NULL } ["z3p8bg5R7vQ"]=> object(stdClass)#8999 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "z3p8bg5R7vQ" ["related_video_title"]=> string(95) "Евгений Маргулис с живым концертом на Авторадио (2025)" ["posted_time"]=> string(21) "1 день назад" ["channelName"]=> NULL } ["_8yvMUtO8vw"]=> object(stdClass)#9000 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "_8yvMUtO8vw" ["related_video_title"]=> string(0) "" ["posted_time"]=> string(0) "" ["channelName"]=> NULL } }
Gulp 2024, полное руководство, современный синтаксис

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

Как Сбежать Из Тюрьмы С Помощью Инженерии

Как Сбежать Из Тюрьмы С Помощью Инженерии

На вершину горы за 6 часов - самая экстремальная мотогонка в мире - Данила Черняев на мотоцикле

На вершину горы за 6 часов - самая экстремальная мотогонка в мире - Данила Черняев на мотоцикле

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

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

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

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

Слайдер SWIPER. Подробный курс. Подключение настройка примеры.

Слайдер SWIPER. Подробный курс. Подключение настройка примеры.

Компиляция SASS и SCSS через Gulp сборщик, Уроки по сборщику Gulp 4

Компиляция SASS и SCSS через Gulp сборщик, Уроки по сборщику Gulp 4

100 Человек Vs Самая Большая Ловушка!

100 Человек Vs Самая Большая Ловушка!

Git и GitHub Курс Для Новичков

Git и GitHub Курс Для Новичков

Docker Для Начинающих за 1 Час | Docker с Нуля

Docker Для Начинающих за 1 Час | Docker с Нуля

Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite

Gulp 4 сборка 2023, include файлов, конвертация шрифтов, работа с графикой, avif, webp, svg sprite

Свежий взгляд на Gulp: функции и ES-модули

Свежий взгляд на Gulp: функции и ES-модули

Вот почему Прибалтика войдёт в состав России!

Вот почему Прибалтика войдёт в состав России!

Как писать код с ИИ: советы от разработчика с 25-летним стажем

Как писать код с ИИ: советы от разработчика с 25-летним стажем

Как Ubuntu Предала Linux - Вся Правда о Взлёте и Падении Canonical

Как Ubuntu Предала Linux - Вся Правда о Взлёте и Падении Canonical

VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение

VS Code настройка установка плагины // Подробный гайд VS Code за час // VS Code видео обучение

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

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

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

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

Евгений Маргулис с живым концертом на Авторадио (2025)

Евгений Маргулис с живым концертом на Авторадио (2025)

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]