В этом видеоуроке мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. Gulp и множество утилит, написанных для него, подходят для решения практически любой задачи при разработке проекта любой сложности — от небольшого сайта до крупного проекта. Для работы с Gulp у вас должен быть установлен Node.js.

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

  • Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, отслеживание изменений в файлах проекта
  • Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade)
  • Минификация CSS и JS кода, а также, оптимизация и объединение отдельных файлов проекта в один
  • Автоматическое создание префиксов для CSS (приставки к названию CSS свойств, которые добавляют производители браузеров для некоторых нестандартных свойств)
  • Управление файлами и папками в рамках проекта — создание, удаление, переименование
  • Запуск и контроль выполнения внешних команд операционной системы
  • Работа с изображениями — сжатие, создание спрайтов, ресайз (png, jpg, svg)
  • Развертывание проекта (отправка на внешний сервер) по FTP, SFTP, Git
  • Подключение и использование в проекте любого количества Node.js и Gulp утилит, программ и плагинов
  • Создание различных карт проекта и автоматизация другого ручного труда
Основные ресурсы видеоурока:

Node.js
Gulp
Bower
Browsersync

Скринкаст по GULP от Ильи Кантора (Ilya Kantor)

  1. Что такое Gulp? Сравнение с Grunt и Webpack
  2. Установка и запуск задач
  3. Потоки Vinyl-FS
  4. Начальная сборка стилей
  5. Инкрементальная сборка, watch
  6. Инкрементальность и производительность
  7. Автоперезагрузка браузера: browser-sync
  8. Обработка ошибок
  9. Создание плагинов при помощи through2
  10. Более сложный поток: eslint, gulp-if, stream-combiner2
  11. Понимаем ли мы потоки Node.JS?
  12. Организация gulpfile’а
  13. Стили + ресурсы, спрайты, продакшн
  14. Интеграция Gulp и Webpack

Код примеров – в репозитории https://github.com/iliakan/gulp-screencast

Также почитать: Using Gulp to Speed Up WordPress Development — Использование Gulp для ускорения WordPress разработки