Каковы различия между Grunt, Gulp.js и Bower? Почему, когда и как их использовать?

В настоящее время я видел, что большинство фронт-эндовых проектов используют вышеуказанные инструменты, хотя я использую их, как и в своем недавнем проекте, я использую gulp для построения HTML, CSS и JavaScript с использованием таких скриптов, как

$ gulp build

Но я не очень разбираюсь во всех этих интерфейсах, пожалуйста, помогите мне получить общее представление о Grunt, Gulp.js и Bower.

43
Subodh Ghulaxe 15 Дек 2015 в 14:03

4 ответа

Лучший ответ

По сути и с большим количеством ручной разборки деталей, Gulp и Grunt - это обе системы для автоматизации серий взаимозависимых задач, обычно используемые для определения «сборки» вашего проекта, как современный подход к инструменту make. Как правило, проект использует один из них или другой, но не оба одновременно (для одних и тех же частей, в любом случае).

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

Gulp однострочно с их сайта:

Автоматизируйте и улучшите свой рабочий процесс

Grunt один вкладыш от их:

JavaScript Runner Runner

И бауэр:

Менеджер пакетов для Интернета


Почему и когда их использовать?

Я думаю, что вышесказанное охватывает это для Gulp и Grunt: если у вас есть задачи, которые вы хотите автоматизировать (например, создание релизной версии веб-сайта с минификацией, конкатенацией, сжатием и т. Д .; или просмотр файлов на предмет изменений и повторное выполнение задач, когда они изменить для поддержки быстрого развития), вы можете использовать Gulp и Grunt для этого.

Но это не просто сборки. Вы можете использовать Gulp и Grunt для любой серии задач, которые нужно автоматизировать.

Bower полезен для управления клиентскими библиотеками в ваших проектах. Вы можете использовать Bower для установки, скажем, последней версии Bootstrap, и она поместит соответствующие файлы в стандартные места вашего проекта. Bower может обновить эти файлы, если выйдет более новая Bootstrap. Если библиотека зависит от других библиотек (например, JS Bootstrap использует jQuery), Bower помогает управлять этим деревом. Для Grunt есть полезные задачи (и я полагаю, для Gulp), которые могут даже автоматизировать добавление тегов сценария и ссылки в ваш HTML для этих библиотек, благодаря наличию в вашем исходном HTML заполнителя, который в основном говорит «поместите библиотеки Bower здесь».

49
T.J. Crowder 15 Дек 2015 в 11:19

gulp и Grunt являются исполнителями задач. Это разные подходы к одной и той же проблеме. Grunt использует подход, основанный на конфигурации, а gulp использует потоки из node для достижения результата. Вы используете их, чтобы определить, как и какие задачи выполнять (копирование файлов, добавление баннеров, замена текста, проверка стиля и т. Д.). Они (обычно) запускаются из командной строки, вручную.

Например, если при копировании и изменении файлов Grunt будут созданы промежуточные файлы, а gulp использует потоки node и преобразуется на лету.

Когда использовать Grunt или gulp менее конкретный ответ, поскольку он учитывает личные предпочтения, технологическую поддержку (плагины для определенных задач), особенности проекта и простоту настройки. Оба относительно просты в настройке и запуске, но обычно вы выбираете тот, который имеет лучшие плагины для технологического стека, используемого для вашего проекта (хотя оба имеют хорошую поддержку плагинов).

Bower - менеджер пакетов. Он используется для установки пакетов javascript (в основном на стороне клиента) (однако npm - также менеджер пакетов - также содержит почти все эти модули / пакеты. Вы используете его для автоматизации управления зависимостями и установки пакетов.

14
edin-m 26 Дек 2015 в 18:40

Я только что завершил анализ Gulp vs Grunt (наш предыдущий стандарт) и, хотя я думаю, что оба эти фактора очень важны для разработчика переднего плана, и оба являются хорошими решениями, которые я изучаю в отношении Gulp для будущих проектов по следующим причинам:

  1. Gulp, как правило, более лаконичен (плагины делают только одно, а потоки подходят) и удобочитаем. Один скрипт Grunt, который я переделал в Gulp, привел к тому, что всего одна четверть строк кода привела к тому же результату.

  2. Глоток быстрее в целом.

  3. Хотя в Gulp имеется меньше плагинов и более тонких плагинов ключей документации для минимизации, в настоящее время доступны и работают хорошо конкатенация, листинг, LESS-транспорт и т. Д.
5
Anish Rai 21 Окт 2016 в 11:13

Продолжить на посту Т.Дж. Crowder, Bower в достаточной степени похож на NPM, или Composer или Gem. Самое большое различие между NPM и Bower заключается в том, что bower предназначен для пакетов внешнего интерфейса, а NPM (раньше) был для пакетов внутреннего интерфейса. NPM теперь делает как внешние, так и внутренние пакеты.
Кроме того, вам нужен NPM для установки Bower.

Grunt был первым из этих доступных автоматизаторов задач. Это дало лучший опыт, чем было доступно в то время. У него все еще есть большое количество последователей и активное сообщество.

В некотором смысле Gulp пришел от ворчания и улучшил его, используя потоки, а не файлы.

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

9
Pjetr 15 Дек 2015 в 11:17