Gulp – это менеджер задач и сборщик проектов. Что умеет Gulp? Самостоятельно конвертирует и подключает шрифты, а также записывает подключение в файл стилей. Обновляет браузер. Собирает в один несколько HTMLPUG файлов. Работает с CSS препроцессорами, например SASS(SCSS) и оптимизирует их. Не только сжимает изображения но и конвертирует их в современный формат WEBP, а также самостоятельно подключает результат к HTML и CSS файлам. Собирает в один несколько JavaScript файлов с помощью WEBPACK, оптимизирует и сжимает их. Есть возможность работать в синтаксисе ES6. Умеет создавать SVG спрайты, создавать ZIP архив с результатом, Отправлять готовую верстку на FTP сервер и многое другое! Ну что, хочешь себе такой же мощный Галп? Отлично, тогда мы сейчас пошагово установим его с нуля, настроим и применим самые крутые плагины. Погнали!!
Если возникает ошибка: «[HTML] Error: Callback called multiple times»…
Убедитесь что тег img написан в одну строку, путь к картинке указан без кириллицы и пробелов.
🔴 Скачать готовую сборку (патреон, любой уровень):
Спасибо за поддержку бесплатного обучающего контента!
🔴 Функция определения 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 #фрилансерпожизни
🤟 Живи, а работай в свободное время! © . про доработать вордпресс.
