Урок Gulp для новичков

[TaLLeR43]

Рейтинг темы

5.00 звёзд

Когда речь заходит о веб-разработке, то инструмент Gulp помогает выполнять разные задачи и часто используется для следующего:

• запуск веб-сервера;
• автоматическая перезагрузка браузера при каждом сохранении файла;
• использование препроцессоров, таких как Sass или LESS;
• оптимизация CSS, JavaScript и изображений;

Это не исчерпывающий список того, что может делать Gulp. Если вы достаточно сумасшедший, то можете даже создать генератор статичных сайтов с помощью Gulp. Так что да, Gulp очень мощный, но придётся научиться им пользоваться, если вы хотите создавать свои настраиваемые процессы сборки.

Это руководство было написано для Gulp 3.x, но уже вышел Gulp 4.x, который я рекомендую. Как и при любом значительном изменении версии, API существенно обновился, так что если вы установите Gulp 4 и попытаетесь выполнить некоторые действия из этого руководства, то они не заработают. По ходу руководства мы ещё сделаем несколько напоминаний об этом. Пока можете взглянуть на довольно хороший стартовый набор Gulp 4.

Данное руководство поможет вам освоить азы Gulp, после чего вы сами сможете изучить всё остальное.

---

Содержание:​

---

• Почему Gulp?
• Установка Gulp
• Создание Gulp-проекта
• Определяем структуру папок
• Написание первой Gulp-задачи
• Препроцессинг с помощью Gulp
• Подстановки в Node
• Слежение за Sass-файлами
• Перезагрузка с помощью Browser Sync
• Оптимизация CSS и JavaScript-файлов
• Оптимизация изображений
• Копирование шрифтов в папку Dist
• Очистка сгенерированных файлов
• Комбинирование Gulp-задач
• Заключение