Bower verwenden, um die WordPress-Entwicklung zu verbessern

Bower ist wirklich großartig für Teams, da es Ihre Frontend-Abhängigkeiten grundsätzlich selbst dokumentiert. Daher ist es sehr einfach, sie bei Änderungen Ihres Projekts zu aktualisieren. Dies ist ideal für den Build-Prozess Ihres Projekts, sowohl lokal als auch auf dem Server. Sie können Bower auch verwenden, um Ihre eigenen privaten Repositorys einzulesen und für die Wiederverwendung in Projekten zu verwenden.

In dem vorherigen Beitrag habe ich über Bower und einige seiner Funktionen berichtet. In diesem Beitrag werde ich über die Vorteile von Bower sprechen und darüber, wie Sie Ihre WordPress-Entwicklung verbessern können.

Es ist selbstdokumentierend

Wie ich bereits erwähnt habe, ist Bower für Teams wirklich großartig, da es Ihre Frontend-Abhängigkeiten selbst dokumentiert. Wenn Sie meinen vorherigen Beitrag über Grunt gelesen haben, ist es fast genau so. Wenn Sie ein Paket über Bower installieren, geben Sie ein Bower-Installationspaketname, Sie müssen lediglich am Ende Folgendes hinzufügen --sparen. Dadurch wird dieses Paket der Liste der Abhängigkeiten in Ihrem Projekt hinzugefügt bower.json Datei.

Angenommen, Sie möchten Bootstrap in Ihr WordPress-Design einfügen und möchten das .scss Dateien während des Erstellungsprozesses. Sie möchten das Bootstrap-sass-official-Projekt verwenden und es über Bower installieren. 

So würden Sie es machen,

  1. Öffnen Sie Ihr Kommandozeilenwerkzeug Ihrer Wahl
  2. Navigieren Sie zum Stammordner Ihres Projekts
  3. Eintippen Bower installieren bootstrap-sass-official --save und drücken Sie "Return" (oder "Enter")

Wenn alles korrekt installiert ist, sollten Sie zwei Dinge sehen, ein neues bower_components Ordner und boostrap-sass-official hinzugefügt in Ihrem bower.json Datei.

Sie möchten dies für jedes Paket tun, das Sie mit Ihrem Projekt verwenden möchten. Sobald Sie dies getan haben, kann jeder andere Mitarbeiter oder Teamkollege problemlos alle für das Projekt erforderlichen Pakete installieren. Sie müssen nur noch tippen Bower installieren Alle Pakete werden heruntergeladen und für das Projekt installiert.

Natürlich ist diese Technik nicht nur auf Frontend-Frameworks wie Bootstrap beschränkt. Es gibt ein gesamtes durchsuchbares Repository mit Paketen, die einbezogen werden können. Dadurch können Sie die Abhängigkeiten Ihres WordPress-Projekts verwalten Das viel einfacher.

Abhängigkeiten aktualisieren

Andererseits ist es nicht ungewöhnlich, dass Pakete häufig aktualisiert werden, oder? Dies ist ein weiterer Ort, an dem Bower nützlich wird.

Nachdem Sie alle Abhängigkeiten Ihres Projekts dokumentiert und installiert haben, ist es sehr einfach, diese Pakete zu aktualisieren, wenn Updates verfügbar sind. Sie müssen nur noch etwas eingeben Bower Update und Bower wird alle Ihre Abhängigkeiten in Ihrem lesen bower.json Datei und gehen Sie nach Updates, die heruntergezogen werden können.

Wenn Bower weiß, ob Updates verfügbar sind, können Sie sich die getaggte Version in Ihrem ansehen bower.json Datei und prüfen Sie das neueste Tag im GitHub-Repository des Projekts. Sie können diese getaggten Versionen auf der Freigabeseite wie Boostrap Sass-Releases anzeigen.

Um mehr über die Bedeutung der getaggten Versionen zu erfahren, sollten Sie sich die semantische Versionierung ansehen. Dies ist, was die meisten Bower-registrierten Projekte für ihre Veröffentlichungen verwenden, daher ist es praktisch zu verstehen, was die Zahlen bedeuten.

Prozess erstellen

Die über Bower installierten Pakete werden nur für die Erstellungs- oder Kompilierungszeit benötigt. Sie müssen nicht zu Ihrem Repository hinzugefügt werden. Das bower_components Ordner ist so ziemlich ein temporärer Ordner, also würde ich auch vorschlagen, ihn zu Ihrem Ordner hinzuzufügen .Gitignore Datei auch im Git Repository Ihres Projekts, damit Sie sie nicht hinzufügen.

Wenn Sie über einen Build-Server verfügen oder eine kontinuierliche Integration für Ihr Projekt eingerichtet haben, sollten Sie sicherstellen, dass Sie einen Bower installieren am Anfang Ihres Builds. Sobald alle anderen Aufgaben ausgeführt wurden, können Sie das leeren bower_components Ordner oder stellen Sie sicher, dass Sie a ausführen Bower Update bei jedem nachfolgenden Build.

Wenn Sie Grunt für Ihre Build-Tasks verwenden, gibt es ein Grunt-Plugin namens Grunt-Bower-Task, mit dem a ausgeführt werden kann Bower installieren für dich.

Private Repositories

Sie können Bower auch verwenden, um Ihre eigenen privaten Repositories einzulesen. Dies kann für die Wiederverwendung von Code in Projekten hilfreich sein. Angenommen, Sie haben eine Boilerplate oder ein benutzerdefiniertes Framework, das Sie für jedes Projekt verwenden. Sie können es als eigenes GitHub-Repository speichern und dann mit Bower in Ihre anderen Projekte einfügen.

Sie müssen es unbedingt in der öffentlichen Bower Registry registrieren, um es herunterziehen zu können. Keine Sorge, wenn jemand keinen Zugriff darauf hat, kann er sie nicht herunterziehen.

Fazit

In diesem Beitrag habe ich darüber gesprochen, wie Bower Ihrer WordPress-Entwicklung helfen kann. Ich habe mich darauf konzentriert, die Abhängigkeiten Ihres Projekts zu dokumentieren und zu aktualisieren. Ich habe auch die Verwendung von Bower als Teil Ihres Build-Prozesses und die Verwendung Ihrer eigenen privaten Repositories angesprochen.

Im nächsten Beitrag gehe ich durch, wie Sie Bower in Ihrem nächsten oder vorhandenen Projekt einrichten. Ich werde auch einige fortgeschrittene Möglichkeiten zur Verwendung in Ihrem Projekt vorstellen.

Ressourcen

  • Laube
  • Bootstrap-sass-offiziell
  • Boostrap SASS veröffentlicht
  • Semantische Versionierung
  • Grunzen-Laugen-Aufgabe
  • Grunzen
  • Registrieren von Bower-Paketen
  • Bower Registry