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

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

Я видел в настоящее время, большинство проектов front-end используют выше инструменты, хотя я использую их, как в моем недавнем проекте. Я использую gulp для создания HTML, CSS и JavaScript с помощью script, например

$ gulp build

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

Ответы

Ответ 1

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

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

Gulp с одним веб-сайтом:

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

Грунтовый однострочный из них:

Бегущий по JavaScript JavaScript

И Бауэр:

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


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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

  • Gulp быстрее вообще.

  • Хотя Gulp имеет меньше плагинов и более тонкие плагины для документации для минимизации, конкатенации, листинга, передачи LESS и т.д., в настоящее время доступны и работают хорошо.