Was sind die Unterschiede zwischen Grunt, Gulp.js und Bower? Warum & wann man sie benutzt?

Question

Was sind die Unterschiede zwischen Grunt, Gulp.js und Bower? Warum & wann und wie man sie benutzt?

Ich habe heute gesehen, den größten Teil der Front-End-Projekt über Tools verwenden, obwohl ich wie sie in meinem letzten Projekt verwende ich schluck bin mit HTML, CSS zu bauen und JavaScript-Skript wie

$ gulp build 

aber nicht viel Verständnis für all diese Front-End-Frameworks, please mir helfen, das allgemeine Verständnis von Grunt, Gulp.js und Bower zu bekommen.

Answer 1

Im Wesentlichen und mit viel Hand-waving Weg von Details, Gulp und Grunt sind beide Systeme für die Automatisierung von Serien von voneinander abhängigen Aufgaben, häufig verwendet für die Definition der "Build" Ihres Projekts, wie eine moderne Übernahme das make Werkzeug. In der Regel verwendet ein Projekt eines oder das andere, aber nicht beide gleichzeitig (für die gleichen Teile sowieso).

Bower ist anders, und häufig mit Gulp oder Grunt verwendet: Es ist ein Paket-Manager für clientseitige Bibliotheken, so dass es einfach, diese libs auf dem neuesten Stand zu halten, sie und ihre Abhängigkeiten in einer standardisierten Art und Weise zu spezifizieren her.

Der Gulp Einzeiler von ihrer Website:

Automate und verbessern Ihren Workflow

Die Grunt Einzeiler von ihnen:

Die JavaScript-Task-Runner

Und Bower:

Ein Paket-Manager für das Web

---

Warum & wenn sie benutzen?

ich glaube, die über dem für Gulp und Grunt umfasst: Wenn Sie Aufgaben, die Sie (wie den Aufbau der Release-Version einer Website mit minification, Verkettung, Kompression, usw .; oder gerade Dateien für Änderungen automatisieren möchten und wenn sie sich ändern, um die schnelle Entwicklung zu unterstützen, können Sie Gulp und Grunt dafür verwenden.

Aber es ist nicht nur Builds. Sie können Gulp und Grunt für jede Reihe von Aufgaben verwenden, die Sie automatisieren müssen.

Bower ist nützlich für die Verwaltung der clientseitigen Bibliotheken in Ihren Projekten. Sie können Bower verwenden, um beispielsweise die neueste Version von Bootstrap zu installieren, und die relevanten Dateien werden an Standardstandorten in Ihrem Projekt abgelegt. Bower kann diese Dateien aktualisieren, wenn ein neuerer Bootstrap herauskommt. Wenn eine Bibliothek von anderen Bibliotheken abhängt (JS von Bootstrap basiert beispielsweise auf jQuery), hilft Bower beim Verwalten dieser Struktur. Es gibt hilfreiche Aufgaben für Grunt (und ich nehme an, für Gulp), die sogar das Hinzufügen der Skript- und Link-Tags zu Ihrem HTML für diese Bibliotheken automatisieren können, indem Sie einen Platzhalter in Ihrer Quell-HTML haben, der im Grunde sagt: "Put the Bower libs hier."

Answer 2

gulp und Grunt sind Aufgabe Läufer. Sie verschiedene Ansätze zum gleichen Problem. Grunt verwendet Konfiguration basierten Ansatz, bei gulp Ströme aus node verwendet Ergebnis zu erzielen. Sie sie verwenden, um festzulegen, wie und Aufgaben, die ausgeführt werden soll (das Kopieren von Dateien und fügte hinzu, Banner, ersetzen von Text, stil~~POS=TRUNC, etc ...). Sie sind (in der Regel) von der Kommandozeile ausgeführt werden, manuell.

Zum Beispiel, wenn das Kopieren und Modifizieren von Dateien Grunt Zwischendateien schaffen und gulp wird eine Hebelwirkung node Streams und transformieren im laufenden Betrieb

Grunt oder gulp ist weniger spezifische Antwort, weil es persönliche Vorlieben, Technologieunterstützung (Plugins für bestimmte Aufgaben), Projektspezifikationen und einfache Konfiguration berücksichtigt. Beide sind relativ einfach zu installieren, aber normalerweise wählt man am Ende eines, das über bessere Plugins für den für Ihr Projekt verwendeten Technologie-Stack verfügt (obwohl beide über eine gute Plugin-Unterstützung verfügen).

Bower ist Paketmanager. Es wird verwendet, um Javascript (meist Client-Seite) Pakete zu installieren (jedoch npm - auch Paket-Manager - enthält auch fast alle diese Module/Pakete. Sie verwenden es, um die Abhängigkeitsverwaltung und Paketinstallation zu automatisieren.

Answer 3

um fortzufahren TJ Crowder, Bower ist NPM oder Composer oder Gem ziemlich ähnlich. Der größte Unterschied zwischen NPM und Bower ist, dass Bower für Frontend-Pakete verwendet wird, während NPM (früher) für Backend-Pakete. NPM jetzt Frontend-Pakete sowie Back-End-Pakete.
auch Sie NPM müssen Bower installieren.

Grunt war die erste dieser Frontend Aufgabe Automatisierer, die verfügbar war. Es gab eine bessere Erfahrung als das, was in der zur Verfügung stand Zeit. Es hat immer noch eine große Anhängerschaft und aktive Gemeinschaft.

Gulp kam in gewisser Weise von Grunt, und verbessert es durch die Verwendung von Streams, nicht Dateien.

Grunt schreibt Änderungen in eine Datei und lädt sie in diese Datei, um weitere zu bearbeiten. Gulp liest eine Datei und führt alle Transformationen im Datenstrom durch und schreibt erst, wenn alle Manipulationen durchgeführt wurden. Es bedeutet, es ist async und schneller als grunzen. Und ich glaube, dass Gulp für neue Projekte zugunsten von Grunt verwendet werden sollte.
Es gibt wahrscheinlich große Anwendungsfälle, in denen Grunformen besser sind als Schluck, aber normalerweise ist Schluck schneller.

Answer 4

Ich habe gerade eine Analyse von Gulp vs Grunt (unserem früheren Standard) abgeschlossen und obwohl ich denke, beide sind wichtig zu wissen, für einen Front-End-Entwickler zu aktuellen und beide sind gute Lösungen Ich lerne in Richtung Gulp für zukünftige Projekte für die folgenden Gründe:

1. Gulp ist in der Regel prägnanter (Plugins tun nur eine Sache und Ströme Ansatz) und lesbar. Ein Grunt-Skript, das ich in Gulp neu geschrieben habe, ergab nur ein Viertel der Codezeilen, um das gleiche Ergebnis zu erzielen.

2. Gulp ist im Allgemeinen schneller.

3. Obwohl Gulp über weniger Plugins und dünnere Dokumentations-Plugins zur Vereinheitlichung verfügt, sind Verkettung, Auflistung, LESS-Transpilation usw. derzeit verfügbar und funktionieren gut.