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





скринкаст для (5)


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

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

  2. В общем, глоток быстрее.

  3. Хотя у Gulp меньше плагинов и более тонких плагинов документации для минимизации, конкатенации, листинга, LIS-транспиляции и т. Д., В настоящее время доступны и работают хорошо.

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

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

$ gulp build

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




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

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

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

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




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

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

Gulp one-liner со своего веб-сайта:

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

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

Запуск задачи JavaScript

И Бауэр:

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

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

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

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

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




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

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

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

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




Далее следует выдержка из Closure: The Definitive Guide от Michael Bolin . Это может показаться немного длинным, но оно насыщено большим пониманием. Из «Приложение B. Часто неправильно понятые концепции JavaScript»:

Что this означает, когда вызывается функция

При вызове функции формы foo.bar.baz() объект foo.bar упоминается как получатель. Когда функция вызывается, в качестве значения для this используется приемник:

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.
obj.addValues(20);

Если при вызове функции нет явного приемника, глобальный объект становится получателем. Как поясняется в «goog.global» на стр. 47, окно является глобальным объектом, когда JavaScript выполняется в веб-браузере. Это приводит к неожиданному поведению:

var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
f(20);
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN

Несмотря на то, что obj.addValues и f относятся к одной и той же функции, они ведут себя по-разному при вызове, потому что значение приемника отличается в каждом вызове. По этой причине при вызове функции, которая ссылается на this , важно убедиться, что при ее вызове будет иметь правильное значение. Чтобы быть ясным, если бы this не было указано в теле функции, то поведение f(20) и obj.addValues(20) было бы одинаковым.

Поскольку функции являются первоклассными объектами в JavaScript, они могут иметь свои собственные методы. Все функции имеют методы call() и apply() которые позволяют переопределить приемник (т. Е. Объект, к которому this относится) при вызове функции. Подписи метода заключаются в следующем:

/**
* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
*/
Function.prototype.call;
/**
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function
*/
Function.prototype.apply;

Обратите внимание, что единственная разница между call() и apply() заключается в том, что call() принимает параметры функции как отдельные аргументы, тогда как apply() принимает их как один массив:

// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

Следующие вызовы эквивалентны, так как f и obj.addValues относятся к одной и той же функции:

obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

Однако, поскольку ни call() ни apply() используют значение собственного приемника для замены аргумента приемника, когда это не указано, следующее не будет работать:

// Both statements evaluate to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

Значение this никогда не может быть null или undefined при вызове функции. Когда null или undefined предоставляется в качестве приемника для call() или apply() , глобальный объект используется вместо значения для приемника. Следовательно, предыдущий код имеет тот же нежелательный побочный эффект добавления свойства с именем value к глобальному объекту.

Может быть полезно подумать о том, что функция не знает о переменной, которой она назначена. Это помогает укрепить идею о том, что значение этого будет связано при вызове функции, а не при ее определении.

Конец экстракта.





javascript html gruntjs gulp bower