7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Eine Einführung in Bower mit WordPress

Scroll to top
Read Time: 3 mins

German (Deutsch) translation by Jonas Döbertin (you can also view the original English article)

Die Mehrheit an Web-Projekten basiert heutzutage auf Bibliotheken von Dritten. Wer an einem WordPress-Theme arbeitet, setzt vermutlich HTML5 Boilerplate, Bootstrap oder Foundation ein. Die meisten dieser Projekte werden auf GitHub entwickelt und stehen via Bower zur Verfügung.

In dieser Reihe von Artikeln werde ich Euch Bower näher bringen, darüber reden, wie es Eure WordPress-Theme- oder Plugin-Entwicklung verbessern kann, und werde Euch zeigen, wie Ihr ein Projekt mithilfe von Bower umsetzt.

Was ist Bower?

Was genau ist Bower? Wenn es nach der Projekt-Website geht:

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack.

Zusammengefasst bedeutet das: Bower bietet eine Möglichkeit, auf einfache Weise anzugeben, auf welchen Bibliotheken (bzw. Paketen) Euer Projekt aufbaut. Es schaut sich an, welche Bibliotheken und Pakete diese Bibliotheken wiederum selbst benötigen, und verwaltet alles automatisch.

Bower basiert auf Node.js und NPM also müsst Ihr sicherstellen, das diese in Eurem System installiert sind. Eine weitere Vorraussetzung ist, das die Bibliotheken auf GitHub verfügbar und in der Bower Registry gelistet sind.

Drittanbieter-Bibliotheken

Wie ich bereits erwähnte ist es heutzutage höchst wahrscheinlich, das Ihr Bibliotheken von Drittanbietern in Euren Projekten einsetzt. Üblicherweise habt Ihr GitHub besucht, die Bibliotheken einzeln heruntergeladen und die benötigten Dateien zu Euren Projekten hinzugefügt.

Mit Bower könnt Ihr diese Bibliotheken ganz einfach installieren bzw. herunterladen lassen; ohne GitHub zu besuchen. Alle Bibliotheken, die Ihr mit Bower installiert, werden in einem bower_components-Ordner innerhalb Eurer Projekte abgelegt. Das Alles passiert per Kommandozeile, es gibt kein hin und her zwischen Browser und Projektordner.

Abhängigkeiten Verwalten

Ein weiteres tolles Feature von Bower ist, das es automatisch die Abhängigkeiten der Bibliotheken verwalten. Es hat ein Auge auf alle Bibliotheken die Eure Projekte benötigen und alle Bibliotheken die diese Bibliotheken wiederum selbst voraussetzten.

Als Verdeutlichung: nehmen wir an, eines Eurer Projekt benötigt jQuery. Ebenfalls entscheidet Ihr Euch, auch Bootstrap und FitVids in dem Projekt einzusetzen. Bower sieht sich all diese Pakete und deren benötigten Bibliotheken an und entscheidet selbstständig, welche Versionen der Bibliotheken jeweils nötig sind und lädt diese herunter. Falls dabei Konflikte auftreten, gibt Bower Euch Bescheid.

Mal ehrlich, wer möchte all diese Abhängigkeiten schon selbst im Auge behalten müssen?

Schlanke Projekte

Ich erwähnte bereits, das alle Bibliotheken in einem bower_components-Ordner veraltet werden. Während ihr entwickelt, habt ihr den vollen Zugriff auf alles in diesem Ordner. Ihr müsst ihn aber, dank Bower, nicht dem Repository Eures Projektes hinzufügen.

Mal angenommen, Ihr möchtet Bootstrap für das Layout eines Themes verwenden und benutzt Sass um die Stylesheets in einer style.css-Datei zusammenzufassen. In diesem Fall könnt Ihr einfach die bootstrap-sass-official Bibliothek einbinden und die bootstrap.scss-Sass-Datei in Eure bestehenden .scss-Dateien importieren.

In den nächsten Artikel werde ich das im Detail beleuchten.

Zusammenfassung

Ich habe aufgezeigt, was Bower eigentlich ist und wie es Euch dabei hilft, mit Drittanbieter-Bibliotheken zu arbeiten. Ich habe außerdem beleuchtet, wie es dabei hilft Abhängigkeiten zu verwalten und Eure Projekt-Repositories kompakt zu halten.

Im nächsten Artikel werde ich detailliert erläutern, wie Bower speziell Eure WordPress-Entwicklung komfortabler machen kann. Ganz egal, ob Ihr einzelne Entwickler seid oder in einem Team arbeitet.

Weitere Informationen

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.