Share
In dieser ganzen Serie haben wir uns Bower angesehen und wie er unseren WordPress-Entwickler verbessern kann. Während wir diese Serie abschließen, schauen wir uns an, wie Sie Bower für Ihr nächstes Projekt einrichten. Im Einzelnen erfahren Sie, wie Sie verschiedene Komponenten mit Bower installieren, aktualisieren und anpassen.
In vorherigen Beiträgen habe ich darüber gesprochen, was Bower ist und wie es Ihnen bei Ihrer WordPress-Entwicklung helfen kann. In diesem Beitrag werde ich Sie durch die Einrichtung von Bower für Ihr Projekt und einige fortgeschrittene Techniken führen.
Einige Konzepte ähneln Grunt, daher würde ich vorschlagen, einen vorherigen Beitrag, Einrichten von Grunt für Ihr nächstes Projekt, anzusehen. Wir bekommen endlich etwas Code. Lass uns das machen!
Der Schlüssel zu Bower in einem Projekt ist der bower.json Datei. Dies ist, was während a analysiert wird Bower installieren für Sie und jeden Verbraucher Ihres Projekts. Es ist auch notwendig, um Abhängigkeiten zu speichern, aber dazu später mehr.
Das erste, was wir tun werden, ist eine bower.json Datei im Stammordner des Projekts. Ich würde vorschlagen, mindestens mit dem Namen, der Beschreibung und der Version zu beginnen.
Wir beginnen mit:
"name": "tuts-bower", "description": "Beispielprojekt für Tutorial zu Bower for Tuts +", "Version": "1.0.0"
Jetzt haben wir eine bower.json Datei, fügen wir Bootstrap zu unserem Projekt hinzu. Wir werden dies tun, indem wir zur Befehlszeile gehen und sie eingeben Bower installieren bootstrap-sass-official --save. Dies sollte ein erstellen bower_components Ordner mit einem Bootstrap-sass-offiziell Ordner darin, zusammen mit der Aktualisierung unserer bower.json Datei.
So sollte es jetzt aussehen:
"name": "tuts-bower", "description": "Beispielprojekt für Tutorial zu Bower for Tuts +", "version": "1.0.0", "dependencies": "bootstrap-sass-official": " ~ 3.1.1 "
Sie werden feststellen, dass Abhängigkeiten hinzugefügt werden Bootstrap-sass-offiziell zusammen mit der neuesten Versionsnummer.
Eine meiner Lieblingsfunktionen von Bower ist die einfache Aktualisierung der Komponenten, die ich in einem Projekt verwende. Für diejenigen, die mich kennen, probiere ich normalerweise die neueste Version der verwendeten Bibliotheken aus. Sobald eine neue Version von Bootstrap herauskommt, ziehe ich es in ein Projekt ein. Bower macht es wirklich einfach.
In unserem obigen Beispiel bedeutet die Tilde "~" vor der Versionsnummer, dass mindestens diese Version verwendet wird. Bei der Ausführung wird Ihr Projekt außerdem auf eine neue Patch-Version aktualisiert Bower Update. Wenn zum Beispiel / wenn Bootstrap auf 3.1.2 aktualisiert, können Sie es einfach ausführen Bower Update und Sie werden auf diese Version aktualisiert.
Es gibt verschiedene Möglichkeiten, wie Sie festlegen können, welche Versionen der einzelnen Komponenten verwendet werden sollen.
Accentsconagua
3.1.1 ~ 3.1.1 ^ 3.1.1 * Jetzt, da wir Bootstrap installiert haben, können wir es in unser Projekt integrieren. Für das Beispiel in diesem Beitrag füge ich nur die Stile zum Projekt hinzu, nicht das JavaScript oder die Schriftarten. Ich füge diese in das gesamte Projekt auf GitHub ein.
Das erste, was wir tun wollen, ist eine style.scss Datei, die wir in unsere style.css-Datei im Stammverzeichnis unseres Projekts kompilieren werden. Normalerweise erstelle ich eine Struktur css / sass / dann platziere alle meine .scss Dateien im sass-Ordner. Lasst uns fortfahren und unsere erstellen style.scss Datei dort.
Da wir ein Theme erstellen, brauchen wir oben einige Kommentare, die wir dann in die importieren können bootstrap.scss Datei, die wir mit Bower heruntergezogen haben. Sie müssen den Pfad dazu herausfinden und dann eine verwenden @einführen um es so zu bringen:
/ *! Themenname: Tuts Bower Theme-URI: http://code.tutsplus.com/ Version: 1.0.0 Beschreibung: Beispielprojekt für das Tutorial zu Bower für Tuts + Autor: Jason Bradley Autor-URI: http://jasonbradley.me Lizenz: GNU General Public License v3.0 Lizenz-URI: http://www.gnu.org/licenses/gpl-3.0.html * / // Bootstrap-Stile importieren @import '… /… / bower_components / bootstrap-sass-official / vendor / Assets / Stylesheets / Bootstrap ';
Ich verwende grunt-contrib-sass in meinem Beispielprojekt. Wenn wir nun unseren Sass-Compiler ausführen, wird das kompiliert bootstrap.scss in unser style.css Datei. Jetzt haben wir alle Bootstrap-Stile zu unserem Projekt hinzugefügt.
Sie können diese Komponenten auf zwei Arten anpassen: Ich konzentriere mich auf das Styling. Eine Möglichkeit besteht darin, die Stile mit einem anderen Stylesheet zu überschreiben oder in der Reihenfolge, in der die Dinge in Ihrem kompiliert werden .scss Dateien. Ein anderer Weg, den ich empfehle, besteht darin, das Vorhandene zu überschreiben .scss Dateien, die Sie mit Bower abrufen.
Schauen wir uns das an bootstrap.scss Datei, auf die ich im vorherigen Abschnitt verwiesen habe. Es ist im Wesentlichen zu den anderen importieren .scss Dateien, die zum Kompilieren benötigt werden. Wenn Sie sich die Dateien und die Reihenfolge ansehen, in der die Dinge importiert werden, sollten Sie das sehen variables.scss Datei an der Spitze. Bootstrap hat als Projekt sehr gute Arbeit geleistet, um häufig überschriebene oder wiederverwendete Stile wie Farben und Schriftgrößen herauszuschneiden.
Wir können das kopieren bootstrap.scss Datei und fügen Sie es als eines unserer Themen hinzu .scss Dateien in der css / sass Mappe. Wenn wir das tun, werden wir den Pfad aller importierten Dateien ändern wollen, um auf unsere zu verweisen bower_components Verzeichnis.
Wir können auch unsere eigenen hinzufügen .scss Dateien in dieser Datei, um Dinge zu überschreiben, wie die Sass-Variablen in variables.scss. Angenommen, Sie wollten die Hintergrundfarbe aktualisieren. Es gibt eine Variable in Bootstraps variables.scs Datei aufgerufen $ body-bg, und wir können das einfach in unserem Motto überschreiben variables.scss Datei.
Beide obigen Beispiele würden sich davon ändern:
// Core Variablen und Mixins @import "bootstrap / variables"; @import "bootstrap / mixins";
zu diesem:
// Kernvariablen und Mixins @import "… /… / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / variables"; // Überschreiben der Standard-Bootstrap-Variablen @import "variables"; @import "… /… / bower_components / bootstrap-sass-official / vendor / assets / stylesheets / bootstrap / mixins";
Dies ist etwas, das ohne konkrete Demo etwas schwieriger zu erklären ist. Deshalb habe ich ein Beispiel für GitHub zusammengestellt, damit Sie einen Blick darauf werfen können.
Damit ist unsere Serie über Bower abgeschlossen. Wir sprachen darüber, was Bower ist, wie es Ihrer WordPress-Entwicklung helfen kann, und sprachen nun darüber, wie Sie es einrichten.
Bower ist wirklich zum Defacto-Frontend-Abhängigkeitsmanager geworden, daher hoffe ich, dass Sie das Konzept kennen und verstehen lernen, wie Sie es in Ihren eigenen Projekten einsetzen können.
