0

Что такое Gulp. Что выбрать Grunt или Gulp

gulp

Gulp – это инструмент сборки веб-приложения, позволяющий автоматизировать рутинные, повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. При помощи Gulp можно написать любой другой конфиг (конфигурационный файл, в котором прописаны настройки), поэтому
справедливо будет сказать, что Gulp - это система для описания произвольного вида задач.
Задачи, которые помогает решить Gulp

  • Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта;
  • Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и т.д.);
  • Минификация CSS и JS кода, а также, оптимизация и конкатенация отдельных файлов проекта в один;
  • Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.
  • Управление файлами и папками в рамках проекта - создание, удаление, переименование;
  • Работа с изображениями - оптимизация, создание спрайтов;
  • Создание различных карт проекта и автоматизация другого ручного труда.
  • Деплой - отправка на внешний сервер.Gulp имеет большое количество плагинов, которые можно найти на странице со списком плагинов, или через поиск по пакетам npm. Также есть черный список плагинов, не рекомендованных к использованию по тем или иным причинам.

 

Gulp или Grunt

gulpvsgrunt
Grunt - это уже устаревший инструмент для описания различных задач, который использовался до Gulp. Но стоит отметить, что его еще продолжают использовать на многих проектах в силу тех или иных причин.
Для того чтобы увидеть разницу, давайте рассмотрим два конфигурационных файла, написанных на Grunt и Gulp. Задача, которую мы создадим, реализует компиляцию Sass-файлов, добавляет вендорные префиксы при помощи инструмента Autoprefixer. Также установим вотчер для слежки за изменениями файлов.
Внимательно изучив grunt file.js, становится понятно, как Grunt реализует цепочку управления:

  •  Первый плагин берет файлы, что-то с ними делает и записываетрезультат выполнения во временную директорию.
  • Следующий плагин читает файлы из временной директории, работает с ними, записывает результат. И так далее пока последний плагин не запишет файлы в итоговое место. То есть Grunt выполняет лишние операции с постоянным чтениеми записью файлов во временную директорию.

Gulp поступает иным образом. Он использует виртуальную файловую систему vinyl-fs.
С ее помощью можно единожды прочитать файл, создать из него объект с необходимыми данными и передавать его от плагина к
плагину.
Вывод: одна и та же задача на Gulp будет выполняться быстрее за счет экономии времени на дисковых операциях.

Дальше обсудим установку и другие тонкости работы с Gulp. Всем удачи.

Подписка
Понравился пост? Так введи Email адрес и жми "Подписаться":


Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *