Share
In Webdesign-Projekten verwenden wir üblicherweise Pakete von Drittanbietern.
Wir laden CSS von Drittanbietern aus Projekten wie Bootstrap und Foundation sowie Skripts wie jQuery und Modernizr. Zunehmend verwenden wir auch Pakete von Drittanbietern als Teil von Entwicklungsprozessen, wie Compiler für CSS-Vorprozessoren oder Code-Bereinigungs- und Komprimierungswerkzeuge, um die Geschwindigkeit zu erhöhen, mit der unsere Websites geladen und ausgeführt werden.
Der Umgang mit all diesen Paketen kann schnell zum Chaos des manuellen Herunterladens, der Dateiübertragung und der Aktualisierung werden. Sicher, wir haben es zum Laufen gebracht, aber es ist zeitaufwändig und oft lassen Projekte nicht mehr aktuell sein. Jetzt gibt es einen besseren Weg, Kommandozeilen-Manager zu verwenden.
In diesem Lernprogramm erfahren Sie, wie Sie den Umgang mit Paketen von Drittanbietern so gestalten, dass Sie nur zwei bis fünf Wortbefehle eingeben.
Hinweis: Wenn Sie dem ersten Tutorial in dieser Serie, "Die Grundlagen der Grundlagen", nicht gefolgt sind, wird es hilfreich sein, das durchzugehen, bevor Sie hier beginnen.
Um mit der Befehlszeile beginnen zu können, um mit Paketen von Drittanbietern umzugehen, ist das erste, was Sie benötigen, ein „Paketverwaltungssystem“ oder „Paketmanager“. Die beiden bei Web-Designern mit Abstand beliebtesten Optionen sind npm und Bower, und diese Systeme werden Sie heute lernen.
Sie haben vielleicht von Node.js gehört, einer JavaScript-basierten Tasche mit Leckereien, die alles von Blog-Plattformen über das Codieren von IDEs bis hin zu Media Centern und gesamten Betriebssystemen unterstützen.
Neben der Installation von Node.js kommt der Paketmanager npm, ein äußerst nützliches System, das Sie in dieser Serie häufig verwenden werden.
Im Gegensatz zu dem, was Sie vielleicht zuerst denken, tut npm dies nicht steht für "Node Package Manager". Offiziell steht es für "Npm ist kein Akronym" und oben auf der Website werden Sie kleine Witze sehen, die bei jeder Auffrischung auftauchen, wie "Nie Affen stoßen" und "Molche majestätisch paradieren".
Npm bietet ab sofort Zugriff auf 127.664 Pakete, die für unterschiedliche Zwecke konzipiert sind, und verwaltet diese. Unter den für das Webdesign nützlichen Elementen finden Sie Pakete wie:
In diesem Tutorial verwenden wir npm in Verbindung mit Node.js, es ist jedoch eine unabhängige Entität, die mit anderen Systemen wie dem neu eingetroffenen IO.js verwendet werden kann.
Als Anfänger empfehle ich, die Tutorials mit Node.js zu verwenden, Sie können jedoch später andere Optionen erkunden.
Meine Einführung in die Verwendung der Befehlszeile für die Paketverwaltung von Drittanbietern erfolgte über Bower. Jemand hat mich mit einem Spruch darauf aufmerksam gemacht
„Hast du Bower ausprobiert? Es ist toll!"
Ich hatte keine Ahnung, wofür es verwendet werden sollte, also ging ich zu www.bower.io und ein Blick auf die Liste der verfügbaren Pakete war alles, was die Glühbirne brauchte, um loszulegen.
Die Bower-Paketbibliothek enthält Folgendes:
Die Chancen sind sehr hoch, dass Sie in Ihren Projekten regelmäßig mindestens ein oder zwei dieser Pakete verwenden. Bower macht es Ihnen schneller und einfacher, so weiterzumachen.
In einigen Fällen finden Sie möglicherweise ein Paket sowohl für npm als auch für Bower. Wenn ja, welche Version sollten Sie verwenden??
Bei beiden Optionen werden Pakete genauso schnell installiert und aktualisiert. Es gibt keine festen Regeln, für die Sie sich entscheiden müssen, und letztendlich werden Sie Ihre eigene Vorgehensweise entwickeln. Deshalb gebe ich Ihnen nur eine allgemeine Daumenregel, auf die Sie Ihre Entscheidungen zunächst stützen können.
Aus der Sicht des Webdesigns hängt der Unterschied wirklich davon ab, wie Sie die Pakete verwenden. Die beiden typischen Anwendungsfälle betreffen die Front-End-Bereitstellung und nicht die Entwicklungsnutzung.
Bower wurde für die Verwaltung von Front-End-Paketen entwickelt. Wählen Sie diese Option aus, wenn Sie nach etwas suchen, das Site-Besucher über einen Browser verbrauchen.
Auf der anderen Seite werden npm-Pakete die Wahl sein, wenn Sie ein Paket nur als Teil Ihres Entwicklungsprozesses verwenden und es nicht im fertigen Produkt enthalten sein wird.
Zum Glück ist die Installation von npm recht einfach, da es mit dem Installationsprogramm für Node.js gebündelt ist. Gehen Sie zu http://www.nodejs.org und laden Sie das Installationsprogramm für Ihre Plattform herunter. Installieren Sie es auf Ihrem Computer und npm wird zusammen mit dem Computer installiert. Dann können Sie fortfahren.
Wichtig! Wenn Sie bereits Node.js auf Ihrem System installiert haben, führen Sie die oben genannten Schritte aus, um sicherzustellen, dass Sie die neueste Version verwenden. Wenn Sie eine veraltete Version ausführen, funktionieren einige der Schritte, die Sie beim Durchlaufen dieser Serie ausführen müssen, möglicherweise nicht.
Laut der npm-Site besteht die Wahrscheinlichkeit, dass eine neuere Version von npm verfügbar ist als die, die Sie mit Ihrer Node.js-Installation erhalten.
So stellen Sie sicher, dass Sie mit der neuesten Version arbeiten:
[sudo] npm install npm -g
Git ist zusammen mit Node.js und npm eine Voraussetzung für die Verwendung von Bower. Git ist auch eine Voraussetzung für einige der anderen Webdesign-orientierten Pakete, die Sie verwenden möchten. Lassen Sie uns also alles auf Ihrem System in Ordnung bringen, bevor Sie fortfahren.
Für OSX-Benutzer sollten Sie zur Git-Hauptseite gehen, das binäre Installationsprogramm verwenden und es wie jedes andere Installationsprogramm der App ausführen: http://git-scm.com/download/mac
Um Bower unter Windows verwenden zu können, benötigen Sie stattdessen eine bestimmte Version von Git für Windows mit dem Namen msysGit. Schlagen Sie die Herunterladen Klicken Sie auf die Schaltfläche und holen Sie sich das ausführbare Installationsprogramm, aber führen Sie es noch nicht aus: http://msysgit.github.io
Der Grund, warum ich ihn noch nicht installiert habe, ist, dass Sie beim Ausführen des Installationsprogramms die richtige Einstellung wählen müssen. Wenn Sie den unten abgebildeten Bildschirm sehen, sollten Sie dies überprüfen Führen Sie Git von der Windows-Eingabeaufforderung aus.
Weitere Informationen zur Installation von msysGit als Voraussetzung für Bower finden Sie unter: Ein Hinweis für Windows-Benutzer.
Bower kann über npm mit dem folgenden Befehl installiert werden:
[sudo] npm install -g bower
Mac-Benutzer, weil wir das verwenden -G kennzeichnen, um Bower global zu installieren Erinnern Sie sich, dass Sie wahrscheinlich einschließen müssen Sudo Geben Sie zu Beginn des Befehls Ihr Kennwort ein, wenn Sie dazu aufgefordert werden.
Sowohl npm als auch Bower arbeiten mit speziellen Manifestdateien, die Informationen zu einem Projekt und eine Liste der verwendeten Pakete enthalten. Bei npm projects heißt diese Datei "package.json" und bei Bower-Projekten "bower.json". Die einfachste Möglichkeit, diese Dateien zu erstellen, ist die Verwendung von drin Befehl mit jedem verbunden. Lass uns das jetzt machen.
Führen Sie den folgenden Befehl aus, während Ihr Terminal auf den Stammordner Ihres Projekts zeigt:
npm init
Dies stellt Ihnen eine Reihe von Fragen, die Sie innerhalb des Terminals beantworten können, und gibt die Informationen an, aus denen Ihre „package.json“ -Datei erstellt wird.
Lesen Sie mehr über die npm init Befehl unter: https://docs.npmjs.com/cli/init
Führen Sie diesen Befehl erneut aus, während Ihr Terminal auf den Stammordner Ihres Projekts zeigt:
Laube init
Genau wie beim npm-Initialisierungsprozess beantworten Sie eine Reihe von Fragen, und Ihre Antworten werden zu Ihrer "bower.json" -Datei.
Lesen Sie mehr über die Laube init Befehl unter: http://bower.io/docs/creating-packages/#bowerjson
Wenn das Projekt initialisiert ist, können Sie Pakete einspielen. Dazu müssen Sie die Pakete, die Sie verwenden möchten, entweder über npm oder Bower finden.
Sie müssen an der richtigen Stelle suchen, da Sie den korrekten Namen des Pakets innerhalb des npm- oder Bower-Ökosystems kennen müssen, um es installieren und aktualisieren zu können.
Sie können über die Suchleiste oben auf der Startseite nach Paketen suchen, die Sie mit npm verwenden möchten.
Es ist auch möglich, direkt über die Befehlszeile mit zu suchen npm Suche , Ich persönlich finde es jedoch einfacher, direkt auf der npm-Seite zu finden, wonach ich suche.
Wenn Sie das gewünschte Paket gefunden haben, notieren Sie sich den Paketnamen.
Die Suche nach Bower-Paketen kann über http://bower.io/search/ erfolgen..
Notieren Sie sich wie bei npm den Paketnamen, den Sie verwenden möchten, sobald Sie ihn gefunden haben.
Wenn Sie ein Paket gefunden haben, das Sie verwenden möchten, können Sie es installieren. Hier verwenden Sie den Paketnamen, den Sie notiert haben. Verwenden Sie in den folgenden Anweisungen diesen Namen, wo immer Sie ihn sehen
Um ein Paket lokal zu installieren, d. H. Nur in Ihrem Projektordner, führen Sie Folgendes aus:
npm installieren
Das Paket wird in einen Unterordner mit dem Namen "node_modules" heruntergeladen, sodass es für die Verwendung in Ihrem Projekt verfügbar ist. Zum Beispiel:
Neben der lokalen Installation von Paketen besteht auch die Möglichkeit, npm-Pakete global zu installieren.
Lokal installierte Pakete sind nur für die Verwendung im Rahmen Ihres Projekts verfügbar. Global installierte Pakete können jedoch von überall auf Ihrem Computer verwendet werden. Sobald das "less" -Paket global installiert ist, können Sie es beispielsweise verwenden, um ein beliebiges ".less" -Dokument an einem beliebigen Ort in Ihrem System zu erstellen.
Um ein Paket global zu installieren, fügen Sie das -G kennzeichnen Sie zu Ihrem Befehl:
[sudo] npm installieren-G
Der Installationsvorgang für Bower-Pakete ist mit dem Befehl fast genau der gleiche wie bei npm:
Bower installieren
Der Unterschied besteht darin, dass Bower-Pakete in einem Unterordner mit dem Namen "bower_components" abgelegt werden. Beispiel:
Da Sie Bower für die Bereitstellung von Front-End-Paketen in bestimmten Projekten verwenden, können alle Ihre Installationen lokal ausgeführt werden -G Flagge.
Wenn Sie daran interessiert sind, ein Projekt, in dem Sie npm oder Bower verwendet haben, mit anderen zu teilen oder nur zu duplizieren und sich darin zu bewegen, ist die Verwaltung von Abhängigkeiten eine großartige Sache. Lass mich erklären warum.
Sie rufen die zuvor erstellten Manifestdateien ab. "Package.json" und "bower.json". In jede dieser Dateien können Sie eine Liste von Paketen hinzufügen, von denen Ihr Projekt abhängt.
Sie haben bereits gesehen, wie npm-Pakete in einen Ordner mit dem Namen "npm_modules" und Bower in "bower_components" gehen. Die coole Sache ist, wenn Sie Ihr Projekt freigeben möchten, können Sie beide Ordner vollständig auslassen, solange Ihre Abhängigkeiten in Ihren Manifestdateien aufgeführt sind.
Dadurch können Sie leicht ein paar hundert Megabytes einsparen, wodurch Sie Ihr Projekt viel einfacher verschieben können.
Wenn jemand anderes an Ihr Projekt gelangt, kann es ausgeführt werden npm installieren Alle in der Datei "package.json" aufgeführten Pakete werden automatisch in einen neuen Ordner "npm_modules" heruntergeladen.
Ebenso der Befehl Bower installieren lädt automatisch alle in der Datei „bower.json“ aufgelisteten Abhängigkeiten herunter und legt sie in einem neuen Ordner „bower_components“ ab.
Es gibt zwei Arten von Abhängigkeiten:
Produktionsabhängigkeiten - im Zusammenhang mit Webdesign bezieht sich dies auf Pakete, die am Frontend bereitgestellt werden, z. Modernizr für Cross-Browser-Kompatibilität.
Entwicklungsabhängigkeiten - im Zusammenhang mit Webdesign bezieht sich dies auf Pakete, die während der Entwicklung verwendet werden, z. WENIGER für die Kompilierung ohne Dateien.
Mit Bower und npm können Sie Produktions- und Entwicklungsabhängigkeiten angeben. Wie bereits erwähnt, verwenden Sie jedoch Bower für Front-End-Pakete und npm für Entwicklungspakete. Daher setzen wir Ihre Bower-Pakete als Produktionsabhängigkeiten und Ihre npm-Module als Entwicklungsabhängigkeiten.
Die Methode zum Festlegen von Abhängigkeiten ist sowohl in npm als auch in Bower die gleiche. Sie müssen dem Befehl, den Sie zum Installieren eines Pakets verwenden, ein Flag hinzufügen.
Um ein Paket als Entwicklungsabhängigkeit festzulegen, fügen Sie das hinzu --save-dev Flagge, z.B..
npm installieren--save-dev
Das Paket wird auf die gleiche Weise installiert, wie Sie es bereits gesehen haben, es wird jedoch zur Liste von hinzugefügt devDependencies in Ihrer "package.json" -Datei wie folgt:
Um ein Paket als Produktionsabhängigkeit festzulegen, fügen Sie das hinzu --sparen Flagge, z.B..
Bower installieren--sparen
In diesem Fall wird das Paket der Liste von hinzugefügt Abhängigkeiten in der "Bower." -Datei wie folgt:
Hinweis: Wenn Sie npm-Pakete global mit dem installieren -G Flag, Sie müssen sich keine Gedanken darüber machen --sparen Noch --save-dev Flaggen.
Das Aktualisieren von Paketen ist auch ein einzeiliger Befehl für Bower und npm.
Führen Sie für lokal installierte Pakete den folgenden Befehl im Stammordner Ihres Projekts aus, in dem sich der Ordner "node_modules" befindet:
npm Update
Um stattdessen global installierte Pakete zu aktualisieren, fügen Sie das hinzu -G Flagge:
[sudo] npm-Update-G
Sie können den Paketnamen auch weglassen, um alle Pakete gleichzeitig im Stapel zu aktualisieren.
Um alle Pakete in einem bestimmten Projekt zu aktualisieren, richten Sie Ihr Terminal auf den Stammordner und führen Sie Folgendes aus:
npm Update
Und um alle Ihre global installierten Pakete zu aktualisieren:
[sudo] npm Update -g
Das Aktualisieren von Bower-Paketen ist im Wesentlichen das gleiche wie bei npm. Führen Sie im Stammordner Ihres Projekts den Ordner "bower_components" aus, in dem sich der folgende Ordner befindet:
Bower Update
Die neueste Version wird automatisch heruntergeladen und in Ihrem Ordner "bower_components" hinzugefügt.
Sobald Sie Ihre Pakete installiert haben, möchten Sie wahrscheinlich wissen, wie Sie sie tatsächlich verwenden können, richtig?
Bei Bower-Paketen kann der Prozess derselbe sein, den Sie normalerweise zum Einzug von Assets verwenden würden, d Skript oder Verknüpfung Elemente in Ihrem HTML-Code, laden Sie Dateien direkt aus Ihrem Ordner „bower_components“.
Dies ist jedoch nicht optimal und es gibt bessere Wege, dies zu tun. Sie können beispielsweise alle JS-Dateien, die Sie aus Ihren Bower-Paketen verwenden, in einer komprimierten Datei zusammenführen und diese stattdessen laden.
Im nächsten Tutorial Automatisierung mit Task-Läufern erfahren Sie, wie Sie dieses Problem lösen können.
Pakete, die über npm installiert werden, werden normalerweise über Befehlszeilen- oder Task-Runner-Skripts verwendet.
Verschiedene Pakete verfügen über eigene Befehle, die Sie für verschiedene Aufgaben verwenden können, z. B. Kompilieren, Komprimieren, Kombinieren und vieles mehr. Diese paketspezifischen Aufgaben können wiederum automatisiert werden, indem Task-Läufer so eingerichtet werden, dass sie mehrere Aufgaben gleichzeitig ausführen.
In den folgenden Lernprogrammen dieser Serie erfahren Sie, wie Sie npm-Pakete auf diese beiden Arten verwenden.
Als Nächstes erfahren Sie, wie Sie die Befehlszeile nutzen können, um Ihrem Front-End-Code eine völlig neue Effizienzebene hinzuzufügen, sowohl bei der Entwicklung als auch bei der Ausführung, sobald er abgeschlossen ist.
Sie erfahren, wie Sie die Befehlszeile für die Pre-Prozessor-Kompilierung, für die CSS-Autoprefixierung, für die Optimierung von JS- und CSS-Dateien und für die Kompilierung für HTML-Abkürzungen und Vorlagen verwenden.
Wir sehen uns im nächsten Tutorial, Power-Up-Front-End-Code.
Accentsconagua