Kategorien
Allgemeines Entwickler

Webprojekte aufsetzen mit Bower

Im letzten Tutorial haben wir gelernt, mit der Konsole Prozesse abzukürzen oder zu vereinfachen. Es gibt aber noch mehr Möglichkeiten sich das alltägliche Webdesigner leben zu vereinfachen. Beim Start eines neuen Projektes sucht sich der Webdesigner erst alle Komponenten, sei es nun auf den einzelnen Websiten oder auf Github zusammen. Nun ist die Suche vorbei und das Zauberwort heißt Bower.

Bower läuft mit nodejs und dem Package Manager npm und Git.
Der Einstieg ist simpel: Wir besuchen die Site von nodejs und klicken auf install – Fertig. Die Installation von nodejs bringt den Package Manager automatisch mit.
Nun kümmern wir uns um Bower. Wir rufen die Konsole auf und geben folgenden Befehl ein.

npm install -g bower

npm startet den Package Manager und installiert Bower. Das „-g“ steht für global. Das heißt wir installieren Bower auf dem Rechner und nicht nur für einen definierten Ordner.

Da Bower die benötigten Packages über Github zieht benötigen wir noch Git, bevor wir zu ersten Einsatz von Bower kommen.

Hier geht es zur grafischen Git Installation. Für alle anderen, die sich für den Weg der Installation über das Terminal entschieden haben, bitte hier entlang.

Nun haben wir die Vorraussetzungen geschaffen Bower über die Konsole anzusprechen. Hierfür haben wir 3 Wege diese zu tun.

  1. die direkte Aufforderung über das terminal mit dem Befehl bower install <package name>
  2. durch eine erstellte Konfigurationsdatei (bower.json)
  3. über die programmatische API

Die direkte Aufforderung

Bei der direkten Eingabeaufforderung springen wir zum jeweiligen  leeren Ordner. Wir erinnern uns. Das geht mit „cd <ordnername>“ und der Eingabe des Ordnernamens. Im jeweiligen Ordner angekommen, geben wir ein

bower install jquery

Bower installiert uns automatisch die neueste Version welche auf Github vorhanden ist.
Nun ist es manchmal so das wir nicht die neueste Version brauchen sonder vielleicht ein zwei Versionsnummern tiefer. Hierfür müssten wir erstmal wieder jQuery deinstallieren.

bower uninstall jquery

Bower deinstalliert uns jQuery und wir beginnen den Prozess erneut.

bower install query#1.9.2

Bower  sucht die angeforderte Versionsnummer. In unserem Fall werden wir eine Fehlermeldung bekommen und bower listet uns die ihm bekannten Versionen auf. Wir suchen die jeweilige heraus.

bower install jquery#1.9.1

Bower  konfigurieren

Um sich dauernde Eingaben über bower zu ersparen gibt uns bower die Möglichkeit über eine bower.json sowie .bowerrc konfigurationen einmalig festzuhalten und um sie dann mittels bower init gesamt zu installieren. Im jeweiligen Projektordner geben wir in der Konsole

bower init

ein und es werden uns auch gleich Fragen gestellt.

bower_img

Bower legt uns eine Datei namens bower.json an. Diese können wir noch ein wenig weiter bearbeiten.

bower_json

Der Part „Ignore“ wird deklariert was innerhalb im Package Ordner nicht mit geladen werden soll. Mit „dependencies“ legen wir fest welche Package benötigt und geladen werden soll, damit das Projekt funktioniert.

Schlussendlich haben wir da noch „devDependencies“ in welchem wir Packages laden die wir für die Entwicklung benötigen. Die bower.json sollte dann so aus sehen:

bower_json1

Nun können wir bower installieren mit:

bower install

Auch hier kann es passieren das wir uns nicht die richtige Versionsnummer von Bootstrap oder jQuery rausgesucht haben und bower gibt uns das auch an, dass er die gewünschte Version in der bower.json nicht finden kann, bietet uns aber freundlicherweise alle zu installierenden Versionsnummern vom jeweiligen Package an. Also die richtige Versionnummer angeben und ein weiters mal

bower install

nun sollten wir alle packages installiert haben.

Zuletzt haben wir noch die Möglichkeit über die Datei .bowerrc bower einen Pfad zu dem jeweiligen Ordner zu geben in dem diese in bower.json angegebenen Packages installiert werden.
Wir legen uns einen neuen Ordner an namens „assets“.

bowerrc

Danach legen wir die Datei .bowerrc an (ACHTUNG! Die Datei mit dem Punkt davor anlegen) und öffnen sie im jeweiligen Editor der Wahl. Unsere .bowerrc Datei sollte dann so aussehen.

bowerrc1

Bevor wir nun die Packages über Bower installieren sollte unser Ordner mit Unterordnen folgendermaßen aussehen.

bowerrc2

Wir installieren die Packages über bower mit dem Befehl bower install und der Ornder sollte nun so aussehen.

bowerrc3

Noch eine kleine aber sehr feine Besonderheit von bower ist, dass man mit der Eingabe des Befehls in der Konsole

bower list —paths

alle Pfadangaben zu den jeweiligen Dateien angezeigt werden. Diese brauchen wir nun nur noch per COPY/PASTE in unsere html Datei einfügen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert