Um eine Website zu erstellen, sind wir in der Regel auf eine Reihe von Bibliotheken angewiesen, sei es in Form von CSS oder JavaScript. Wenn ich z. B. eine kleine Website erstellen würde, die eine Bild-Diashow anzeigt, würde die Website wahrscheinlich jQuery und ein jQuery-Plugin, Flexslider, benötigen. Diese Bibliotheken sind die Voraussetzungen dafür, dass die Website funktioniert.
Während das Hinzufügen dieser Bibliotheken eine einfache Aufgabe sein sollte, könnte bei einer großen Website, die mehr Bibliotheken benötigt, alles von Anfang an umständlich und chaotisch sein. Es kann sein, dass Sie von einem Repository zum anderen wandern müssen, um jede der Bibliotheken herunterzuladen, die Pakete zu extrahieren und sie schließlich in Ihr Projektverzeichnis einzufügen.
Wenn die neue Version verfügbar ist, müssen Sie all das erneut tun (klingt nach viel Arbeit, oder?).
Leseempfehlung: Animate.CSS – CSS3 Library To Create Animation Easily
Wenn das nach dem klingt, was Sie schon seit Ewigkeiten tun, ist dieser Artikel vielleicht eine Lektüre wert. Hier zeigen wir Ihnen ein praktisches Tool namens Bower, das die Verwaltung von Website-Bibliotheken zu einem Kinderspiel macht. Schauen wir es uns an.
Einstieg
Um Bower zu verwenden, müssen Sie Node.js installieren. Da Bower auf Node.js basiert, sollten Sie Bower auf jeder Plattform ausführen können: Windows, Mac und Linux.
Nachdem Sie Node.js installiert haben, öffnen Sie Terminal (oder Eingabeaufforderung) und führen Sie diese Befehlszeile aus, um Bower zu installieren.
npm install -g bower
Bibliotheken installieren
Jetzt sind wir bereit, Bower zu verwenden. Beginnen wir mit der Suche nach einer Bibliothek, die wir in unser Projektverzeichnis aufnehmen wollen. Angenommen, Sie befinden sich gerade in dem Verzeichnis, können Sie bower search {name of the library} eingeben. Hier habe ich zum Beispiel nach Normalize.css gesucht, einer Bibliothek, die den Stil eines Elements in allen Browsern konsistent macht.
bower search normalize
Der Befehl listet eine Reihe von Ergebnissen auf; nicht nur, dass er uns das ursprüngliche Normalize liefert, er zeigt uns auch Normalize-Versionen, die in LESS, Sass, Stylus und die anderen Plattformen konvertiert wurden.
Wenn wir uns entschieden haben, welche wir installieren wollen, können wir bower install {{name of the repository}} eingeben. In diesem Beispiel werde ich sowohl Normalize LESS als auch jQuery installieren.
bower install normalize-less jquery
Dieser Befehl lädt die neueste Version von Normalize-LESS und jQuery herunter und speichert sie in einem neuen Ordner mit dem Namen bower_components; Sie sollten den erstellten Ordner nun in Ihrem Projektverzeichnis finden.
Alternativ können Sie, wenn Sie die ältere Version der Bibliothek installieren möchten, den Befehl gefolgt von der Versionsnummer auf diese Weise ausführen.
bower install jquery#1.10.0
Nun, da wir die Bibliotheken, Normalize und jQuery, in unserem Projektverzeichnis haben, können wir sie verwenden, indem wir jQuery aus dem Ordner bower_components im HTML-Dokument referenzieren und Normalize LESS im anderen LESS-Stylesheet importieren.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
Wenn eine der Bibliotheken nicht mehr in der Website verwendet wird, kann man sie einfach mit dem Befehl bower uninstall deinstallieren, etwa so.
bower uninstall normalize-less
Aktualisierung der Bower-Komponenten
Angenommen, Sie arbeiten seit mehreren Monaten an Ihrem Projekt und einige Bibliotheken, die Sie verwenden (wie jQuery), haben eine neue Version veröffentlicht. In diesem Fall können wir Bower verwenden, um jQuery auf die neueste Version zu aktualisieren. Aber zuerst sollten wir überprüfen, ob die neue Version in Bower mit dem Befehl bower list registriert wurde.
Die neueste Version von jQuery ist, wie Sie unten sehen können, 2.1.1.
Um jQuery zu aktualisieren, können wir bower update jquery eingeben. Sobald die Aktualisierung abgeschlossen ist, können Sie den Befehl bower list erneut ausführen, um die aktuell installierte Version zu überprüfen. Wie Sie unten sehen können, haben wir jetzt die neueste Version von jQuery.
Wrap Up
Bower ist ein wirklich praktisches Tool, das Sie in Ihrem Projekt einsetzen sollten. Es ist wie ein AppStore, aber für Ihre Website – wir können Bibliotheken bequem installieren, aktualisieren und entfernen.
Im nächsten Artikel werden wir in Bower eintauchen und einige fortgeschrittene Funktionen erkunden. Bleiben Sie also dran.
