Was ist so toll an Bower?

Das Folgende ist ein Gastbeitrag von Dan Sundy von Helios Design Labs. Dan wird sowohl erklären, wie man Bower verwendet, als auch ein Argument dafür liefern, und zwar aus der Perspektive von jemandem, der sich anfangs gegen die Idee gesträubt hat.

Als ich anfing, mit Bower zu arbeiten, verstand ich den Reiz nicht ganz. „Ernsthaft?“ I thought. „Ist es jetzt zu viel Arbeit, eine Datei herunterzuladen und zu entpacken?“ Ich war auch nicht sonderlich begeistert davon, einen Haufen neuer Befehle in ein Gehirn zu stopfen, das bereits mit Git, Grunt, Gulp, Jekyll, Node usw. aus allen Nähten platzte.

Es gibt zwei Dinge, die ich dieser Version von vor einem halben Jahr sagen würde. Erstens, Bower kann ein bisschen mehr als nur ein oder zwei Dateien herunterladen. Zweitens: Es lohnt sich, eine Stunde damit zu verbringen, ein Tool zu erlernen, das eine sich wiederholende Aufgabe eliminiert.

Das Wichtigste zuerst: Was zum Teufel ist Bower?

Für die Uneingeweihten: Bower ist ein Paketmanager. Er ist gut darin, Pakete zu verwalten – alles, wofür man auf einen externen Autor angewiesen ist. Gute Beispiele sind CSS-Frameworks wie Bootstrap, Bibliotheken wie jQuery, jQuery-Plugins oder JavaScript-Frameworks wie Angular. Die offizielle Bower-Website, Bower.io, sagt es wohl am besten:

Websites bestehen aus vielen Dingen – Frameworks, Bibliotheken, Assets, Dienstprogrammen und Regenbögen. Bower verwaltet all diese Dinge für dich.

Bower holt und installiert Pakete von überall her und kümmert sich um das Suchen, Finden, Herunterladen und Speichern der Dinge, nach denen du suchst.

Voraussetzungen

Es gibt einige Dinge, die du brauchst, bevor du mit Bower arbeiten kannst:

• Die Kommandozeile. Ja, es ist ein Kommandozeilentool (so furchterregend ist es nicht).
• Node und NPM. Bower ist ein Node-Modul, also brauchst du NPM, um es zu bekommen.
• Git. Bower-Pakete sind Git-Repos. Bower nutzt Git, um zu verstehen, wo das Paket ist, welche Version es hat – und so weiter.
• Globale Installation. Technisch gesehen könntest du es in jedem Projekt installieren, aber du wirst es wahrscheinlich überall haben wollen.

Um Bower global zu installieren:

$ npm install -g bower

Hinweis: Abhängig von deinem Setup musst du vielleicht `sudo npm install -g bower` verwenden, um es global zu installieren.

Die Grundlagen

Um zu beginnen, stelle dir die Verzeichnisstruktur für eine neue Seite vor. Meine sieht normalerweise so aus:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Es gibt einen `src`-Ordner, in dem der Großteil der Entwicklungsarbeit geleistet wird. Eine Gulp-Build-Aufgabe wird schließlich alles vorbereiten und unseren optimierten Code in einen produktionsbereiten `dist`-Ordner kompilieren.

Angenommen, Sie möchten jQuery in dieses Projekt einbinden. Normalerweise würden Sie zu jquery.com gehen, den richtigen Download-Link finden und anklicken, dann entpacken und die Dateien in das richtige Verzeichnis legen.

Mit Bower führen Sie einfach den folgenden Befehl aus:

$ bower install jquery

Jetzt ist ein `bower_components`-Verzeichnis mit einem `jquery`-Ordner entstanden.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery hat es einfach gemacht, seinen Code zu bekommen, indem es ein Paket für Bower erstellt und registriert hat. Die meisten populären Bibliotheken und Frameworks haben das gleiche getan. Wenn Sie überprüfen wollen, ob das gewünschte Asset ein Bower-Paket ist, können Sie eine Suche durchführen:

$ bower search <package-name>

Wenn es nicht registriert ist, ist es immer noch möglich, Repos mit Git-Endpunkten wie diesem zu nutzen:

$ bower install git://github.com/example-user/example-package.git

Erweitert: Wenn Sie sich etwas einfallen lassen wollen, können Sie sogar private Repos installieren, auf die Sie Zugriff haben. Sehen Sie sich dieses Video-Tutorial von Rob Dodson an.

Hier sind einige andere grundlegende Befehle, die Sie verwenden können, um installierte Assets anzuzeigen und zu verwalten.

Auflisten aller Pakete:

$ bower list

Informationen über alle installierten Pakete abrufen:

$ bower info <package-name>

Nach Aktualisierungen suchen mit:

$ bower check-new

Dann, wenn es Aktualisierungen gibt, ein Paket aktualisieren:

$ bower update <package-name>

Aber vielleicht hat die Aktualisierung auf die neueste Version etwas kaputt gemacht.

Installieren Sie eine bestimmte Version – alt oder neu – mit:

$ bower install <package-name>#<version>

Dies ist definitiv keine vollständige Liste. Wenn Sie sich für die ersten Schritte interessieren, empfehle ich Ihnen, ein Testprojekt zu erstellen und eines der vielen Tutorials durchzuarbeiten, die Sie online finden können. Dieses von Treehouse ist großartig: Erste Schritte mit Bower. Dann können Sie sich in alle Befehle vertiefen, indem Sie sich die API von Bower ansehen.

Hey, aber warte, da ist noch mehr!

Das kleine Entwicklerteam, mit dem ich arbeite, verwendet Bower seit etwa einem Jahr. Während die Paketverwaltung über die Kommandozeile großartig war, war ich nicht überzeugt, bis wir anfingen, die Dateien `bower.json` und `.bowerrc` zu benutzen.

.bowerrc

Die Datei `.bowerrc` kann eine Reihe von Dingen tun, aber ich habe meistens gesehen, dass sie benutzt wird, um den Namen und den Ort des `bower_components` Verzeichnisses zu ändern. (Das hat mich sehr gefreut, weil ich es gehasst habe, diesen zufälligen `bower_components`-Ordner im Projektstamm zu haben).

So kann eine `.bowerrc`-Datei aussehen:

{ "directory": "src/components"}

Die Verzeichnisoption sendet Pakete an den Ort, der am meisten Sinn macht – in diesem Fall das `src/`-Verzeichnis. Schauen Sie sich die neue Projektstruktur an:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Beachten Sie, dass der Ordner `bower_components/` verschwunden ist und es einen Ordner `components/` im Verzeichnis `src/` gibt.

Erweitert: Es ist eine gute Idee, etwas wie gulp-usemin oder grunt-usemin zu verwenden, um sich um die Verkettung und Minifizierung für alle zusätzlichen Stile und Skripte zu kümmern.

Wie kann uns also die Datei `bower.json` helfen?

bower.json

Die Datei `bower.json` sieht ähnlich aus wie die `package.json` von Node. Es ist eine Manifestdatei, die es Ihnen erlaubt, Optionen zu spezifizieren. Schauen wir uns ein Beispiel an (das durch Ausführen von bower init generiert werden kann):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Viele dieser Optionen sind vorhanden, falls Sie dieses Repo als Bower-Paket registrieren. Aber sehen Sie das devDependencies Objekt ganz unten? Dieses Objekt wird automatisch aktualisiert, wenn Sie --save-dev an einen Bower-Befehl anhängen, etwa so:

$ bower install jquery --save-dev

Wenn nun ein anderer Entwickler `bower install` ausführt, wird der Computer alles aus der devDependencies-Liste in dem in `.bowerrc` angegebenen Ordner installieren. Wenn ein Entwickler ein Paket hinzufügt oder eine Paketversion mit --save-dev aktualisiert, kann das ganze Team seine Assets mit bower install synchronisieren (nachdem es die neueste Version der Datei `bower.json` heruntergeladen hat).

Da die ganze Arbeit des Suchens und Sammelns mit der Datei `bower.json` wegfällt, gibt es keine Notwendigkeit mehr, irgendwelche dieser Assets zu versionieren. Der Ordner `components/` kann der Datei `.gitignore` hinzugefügt werden, um das Repository schlank zu halten.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Abschiedsgruß

Ich hörte gerade eine Folge meines Lieblings-Podcasts für Webentwickler (wink, wink) und die Moderatoren unterhielten sich darüber, ob Bower tatsächlich nützlich oder nur eine Modeerscheinung sei. Sie fragten sich, ob es darum geht, das Herunterladen zu vereinfachen, oder ob es dazu dient, die Versionen der Bibliotheken zu aktualisieren, wie es Ruby-Gems tun. Sie sprachen davon, dass es ein „front-endy NPM“ sei (ich paraphrasiere).

Das Schöne ist, dass es all diese Dinge kann. Man kann es zum Herunterladen und Aktualisieren von Code verwenden, aber man kann noch weiter gehen. Bower kann Ihnen dabei helfen, Projektbibliotheken und Frameworks synchron zu halten, oder Sie können es mit anderen Tools wie Yeoman integrieren, um noch mehr Zeit bei der Entwicklung einzusparen. Außerdem können Sie eigene Bower-Pakete erstellen und registrieren, um sie in all Ihren Projekten schnell (und sicher) zu installieren und zu aktualisieren.

Oh, und zu der Frage, mit der die Diskussion begonnen hat: Sie würden Bower nicht verwenden, um WordPress zu installieren, und WordPress sollte sich nicht in Ihrem `bower_components`-Ordner befinden. Aber Sie könnten Bower innerhalb Ihres WordPress-Themas verwenden, um externe Assets zu verwalten (laden Sie nur keine Bibliotheken wie jQuery, die bereits im WordPress-Kern enthalten sind).