New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Die Befehlszeile (Command Line) für Webdesign: "Bändigung" der Paketen von Drittanbietern

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics
The Command Line for Web Design: Powering Up Front End Code

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Wir verwenden häufig Pakete von Drittanbietern in Webdesign-Projekten.

Wir laden CSS von Drittanbietern aus Projekten wie Bootstrap und Foundation und Skripte wie jQuery und Modernizr.  In zunehmendem Maße verwenden wir auch Drittanbieterpakete als Teil von Entwicklungsprozessen, wie Compiler für CSS-Präprozessoren oder Code-Bereinigungs- und Komprimierungstools, um die Geschwindigkeit zu maximieren, mit der unsere Websites geladen und ausgeführt werden.

Der Umgang mit all diesen Paketen kann schnell zu einem Durcheinander beim manuellen Herunterladen, Übertragen von Dateien und Aktualisieren führen.  Sicher, wir haben es geschafft, aber es ist zeitaufwändig und seine Unhandlichkeit lässt oft Projekte mit veraltetem Code.  Jetzt gibt es einen besseren Weg, mit Hilfe von Befehlszeilen-Paketmanagern.

In diesem Tutorial lernen Sie, wie Sie mit Paketen von Drittanbietern eine Handvoll von zwei bis fünf Wortbefehlen eingeben können.

Hinweis: Wenn Sie das erste Tutorial in dieser Serie, Das Verständnis der Grundlagen, nicht befolgt haben, finden Sie es hilfreich, dies zu tun, bevor Sie hier beginnen.

Die "Big Two" -Paket-Manager

Um mit der Befehlszeile zu beginnen, um Pakete von Drittanbietern zu behandeln, benötigen Sie als erstes ein "Paketverwaltungssystem" oder "Paketmanager".  Die beiden Optionen, die bei Webdesignern derzeit am weitesten verbreitet sind, sind npm und Bower, und das sind die Systeme, die Sie heute lernen werden.

npm (über Node.js)

Vielleicht haben Sie schon einmal von Node.js gehört, einer JavaScript-basierten Sammlung von Goodies, die von Blog-Plattformen über Kodierungs-IDEs, Medienzentren bis hin zu ganzen Betriebssystemen alles antreibt.

Zusammen mit einer Installation von Node.js kommt der Paketmanager npm, ein enorm nützliches System, das Sie oft in dieser Serie verwenden werden.

Im Gegensatz zu dem, was Sie vielleicht zuerst denken, steht npm nicht für "Node Package Manager".  Offiziell steht es für "npm ist kein Akronym" und oben auf der Seite sehen Sie kleine Witze bei jeder Aktualisierung wie "nie stoßen Sie Affen" und " Molche, die majestätisch vorführen."

Von diesem Moment an bietet npm Zugang zu 127.664 Paketen, die für verschiedene Zwecke gedacht sind.  Unter den nützlichen Elementen für das Webdesign finden Sie Pakete wie:

  • Stylus
  • node-sass
  • LESS 
  • Jade
  • UglifyJS
  • Bower
  • Grunt
  • Gulp
  • Yeoman
  • Autoprefixer
  • BrowserSync
  • Foundation CLI
  • UglifyJS
  • clean-css
  • Jeet.gs
  • Kouto Swiss

Für die Zwecke dieses Tutorials verwenden wir npm in Verbindung mit Node.js, es handelt sich jedoch um eine unabhängige Entität, die mit anderen Systemen wie dem neu eingegangenen IO.js verwendet werden kann.

Als Anfänger empfehle ich, die Tutorials mit Node.js zu folgen, aber vielleicht möchten Sie später weitere Optionen kennenlernen.

Bower

Meine Einführung zur Verwendung der Befehlszeile für die Paketverwaltung von Drittanbietern kam tatsächlich über Bower.  Jemand gab mir einen Tipp, indem ich nur sagte

"Haben Sie Bower ausprobiert?  Es ist toll!"

Ich hatte keine Ahnung, wofür es verwendet wurde, 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 loszugehen.

Die Bower-Paketbibliothek enthält Dinge wie:

  • Bootstrap
  • AngularJS
  • jQuery
  • Font Awesome
  • HTML5 Boilerplate
  • Animate.css
  • Normalize.css
  • Modernizr
  • Underscore
  • Flat UI
  • jQuery UI
  • Handlebars
  • Masonry

Die Chancen stehen sehr hoch, dass Sie mindestens ein oder zwei dieser Pakete regelmäßig in Ihren Projekten verwenden.  Bower macht es für Sie immer einfacher und schneller.

Wann Bower vs. npm zu verwenden

In einigen Fällen können Sie feststellen, dass ein Paket sowohl für npm als auch für Bower verfügbar ist.  Wenn ja, welche Version sollten Sie verwenden?

Bei beiden Optionen werden Pakete genauso schnell installiert und aktualisiert.  Es gibt keine festen Regeln, auf die Sie zurückgreifen können, und Sie entwickeln schließlich Ihre eigenen Methoden, also gebe ich Ihnen nur eine allgemeine Faustregel, auf die Sie Ihre Entscheidungen im Augenblick stützen können.

Aus der Sicht des Webdesigns hängt der Unterschied wirklich davon ab, wie Sie die Pakete nutzen werden. Die beiden typischen Anwendungsfälle sind Frontend Deployment vs. Development.

Bower wurde für die Verwaltung von Front-End-Paketen entwickelt. Wählen Sie es also, wenn Sie nach etwas suchen, das von Website-Besuchern über einen Browser genutzt werden kann.

Auf der anderen Seite werden npm-Pakete die richtige Wahl sein, wenn Sie nur ein Paket als Teil Ihres Entwicklungsprozesses verwenden und es nicht im fertigen Produkt enthalten sein wird.

Installation von npm und Bower

Installieren Sie Node.js und npm

Zum Glück ist die Installation von npm ziemlich einfach, da es mit dem Installer 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 Rechner und npm wird mit installiert, dann können Sie fortfahren.

Wichtig!  Auch wenn Node.js bereits auf Ihrem System installiert ist, führen Sie die obigen Schritte aus, um sicherzustellen, dass Sie über die neueste Version verfügen.  Wenn Sie eine veraltete Version ausführen, funktionieren einige der Schritte, denen Sie beim Durchlaufen dieser Serie folgen müssen, möglicherweise nicht.

Update npm

Laut der npm-Site ist die Wahrscheinlichkeit, dass eine neuere Version von npm verfügbar ist als die, die Sie mit Ihrer Node.js-Installation erhalten haben, wahrscheinlich.

Um sicherzustellen, dass Sie auf der neuesten Version sind, führen Sie Folgendes aus:

Installieren Sie Git / MsysGit

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 webdesignorientierten Pakete, die Sie selbst verwenden möchten. Lassen Sie uns also alles auf Ihrem System abrechnen, bevor Sie fortfahren.

Für OSX-Benutzer

Für OSX-Benutzer sollten Sie die Haupt-Git-Website besuchen, das binäre Installationsprogramm aufrufen und es wie jedes andere App-Installationsprogramm ausführen: http://git-scm.com/download/mac

Für Windows Benutzer

Um Bower unter Windows zu verwenden, benötigen Sie stattdessen eine bestimmte Version von Git für Windows mit dem Namen msysGit.  Klicken Sie auf die Schaltfläche Herunterladen und greifen Sie auf den ausführbaren Installer zu, aber führen Sie ihn noch nicht aus: http://msysgit.github.io

Der Grund, warum ich es noch nicht installiert habe, ist, dass Sie beim Ausführen des Installers darauf achten müssen, die richtige Einstellung zu wählen.  Wenn Sie den folgenden Bildschirm sehen, achten Sie darauf, Run Git über die Windows-Eingabeaufforderung zu überprüfen.

Weitere Informationen zum Installieren von msysGit als Voraussetzung für Bower finden Sie unter Hinweis für Windows-Benutzer.

Installieren Sie Bower

Bower kann über npm installiert werden, indem dieser Befehl ausgeführt wird:

Mac-Benutzer, da wir bower mit dem Flag -g global installieren, denken Sie daran, dass Sie am Anfang des Befehls wahrscheinlich sudo einfügen müssen und geben Sie dann Ihr Passwort ein, wenn Sie dazu aufgefordert werden.

Grundlagen von npm und Bower

Initialisieren Sie ein Projekt

Sowohl npm als auch Bower arbeiten mit speziellen Manifestdateien, die Informationen über ein Projekt und eine Liste der verwendeten Pakete enthalten.  Bei npm-Projekten heißt diese Datei "package.json"  und in Bower-Projekten heißt sie "bower.json".  Der einfachste Weg, diese Dateien zu erstellen, besteht darin, den ihnen zugeordneten init-Befehl zu verwenden.  Lassen Sie uns das jetzt machen.

Über Npm

Führen Sie diesen Befehl aus, wenn Ihr Terminal auf den Stammordner Ihres Projekts zeigt:

Das stellt Ihnen eine Reihe von Fragen, die Sie im Terminal beantworten können, mit den Informationen, aus denen Ihre "package.json" - Datei erstellt wird.

Lesen Sie mehr über den Befehl npm init unter: https://docs.npmjs.com/cli/init

Über Bower

Führen Sie den folgenden Befehl aus, wenn Ihr Terminal auf den Stammordner Ihres Projekts zeigt:

Genau wie beim npm-Initialisierungsprozess beantworten Sie eine Reihe von Fragen und Ihre Antworten bilden Ihre "bower.json" - Datei.

Lesen Sie mehr über den bower init Befehl unter: http://bower.io/docs/creating-packages/#bowerjson

Nach Paketen suchen

Nachdem das Projekt initialisiert wurde, können Sie mit dem Einbringen von Paketen beginnen.  Um das zu tun, müssen Sie die Pakete finden, die Sie entweder über npm oder Bower verwenden möchten.

Sie müssen am richtigen Ort suchen, da Sie den korrekten Namen des Pakets in den npm- oder Bower-Ökosystemen wissen müssen, um es installieren und aktualisieren zu können.

Über npm

Sie können über die Suchleiste nach Paketen suchen, die Sie oben mit npm auf der Startseite verwenden möchten.

Es ist auch möglich, direkt über die Befehlszeile mit npm search <package> zu suchen, aber ich persönlich finde es einfacher, das, wonach ich suche, direkt auf der npm-Seite zu finden.

Wenn Sie das Paket gefunden haben, das Sie verwenden möchten, notieren Sie sich den Paketnamen.

Über Bower

Die Suche nach Bower-Paketen kann über http://bower.io/search/ erfolgen.

Wie bei npm notieren Sie sich den Paketnamen, den Sie verwenden möchten, sobald Sie ihn gefunden haben.

Installieren neuer Pakete

Sobald 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 den Namen, wo immer <package> in einem Befehl angezeigt wird.

Über npm

Um ein Paket lokal zu installieren, d. h. nur innerhalb Ihres Projektordners, führen Sie Folgendes aus:

Das Paket wird in einen Unterordner heruntergeladen wird der Namen „node_modules“, es verfügbar für den Einsatz in Ihrem Projekt zu machen.  Zum Beispiel:

Neben der lokalen Installation von Paketen gibt es auch die Möglichkeit, npm-Pakete global zu installieren.

Lokal installierte Pakete sind nur für die Verwendung im Rahmen des Projekts zur Verfügung, aber global kann installierten Pakete von überall auf Ihrem Rechner verwendet werden.  Zum Beispiel, wenn das „less“ Paket global installiert ist, können Sie es verwenden, um all „.less“ Dokument zu kompilieren, überall in Ihrem System.

Um ein Paket global zu installieren, hängen Sie den Befehl -g an Ihren Befehl an:

Über Bower

Der Installationsprozess für Bower Pakete ist fast genau die gleiche wie bei npm mit dem Befehl:

Der Unterschied besteht darin, dass Bower Pakete in einen Unterordner platziert Namen „bower_components“, zum 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, sodass Sie das Flag -g nicht verwenden müssen.

Mit Abhängigkeiten arbeiten

Wenn Sie daran interessiert sind, ein Projekt, das Sie mit npm oder Bower verwendet haben, zu teilen oder einfach nur zu duplizieren und zu bewegen, ist das Abhängigkeitsmanagement eine großartige Sache, über die Sie Bescheid wissen sollten.  Lassen Sie mich erklären warum. 

Sie rufen die Manifestdateien zurück, die Sie zuvor erstellt haben. "package.json"  und "bower.json".  In jede dieser Dateien können Sie eine Liste von Paketen hinzufügen, von denen Ihr Projekt abhängig ist.

Sie haben bereits gesehen, wie npm Pakete in einen Ordner namens "npm_modules" und Bower's in "bower_components" gehen.  Nun, die coole Sache ist, wenn Sie Ihr Projekt freigeben möchten, können Sie beide Ordner komplett weglassen, solange Sie Ihre Abhängigkeiten in Ihren Manifest-Dateien aufgelistet haben.

Dadurch können Sie leicht ein paar hundert Megabyte sparen, was es viel einfacher macht, Ihr Projekt zu verschieben.

Wenn jemand anderes Ihr Projekt in die Hand nimmt, kann npm install ausgeführt werden, und alle in der Datei "package.json"  aufgeführten Pakete werden automatisch in einen neuen Ordner "npm_modules" heruntergeladen.

Ebenso werden bei der bower install-Befehlsleiste automatisch alle in der Datei "bower.json"  aufgeführten Abhängigkeiten heruntergeladen und in einem neuen Ordner "bower_components" abgelegt.

Produktions- und Entwicklungsabhängigkeiten

Es gibt zwei Arten von Abhängigkeiten:

  1. Produktionsabhängigkeiten - im Kontext des Webdesigns bezieht sich das auf Pakete, die am Frontend bereitgestellt werden, z. Modernizr für Cross-Browser-Kompatibilität.

  2. Entwicklungsabhängigkeiten - im Zusammenhang mit dem Webdesign bezieht sich das auf Pakete, die während der Entwicklung verwendet werden, z. LESS für .less Dateikompilierung.

Mit Bower und npm können Sie Produktions- und Entwicklungsabhängigkeiten angeben.  Wie bereits erwähnt, verwenden Sie Bower für Front-End-Pakete und npm für Entwicklungspakete.  Daher legen wir fest, dass Ihre Bower-Pakete produktionsabhängig sind und Ihre npm-Module Entwicklungsabhängigkeiten aufweisen.

Die Methode zum Festlegen von Abhängigkeiten ist in npm und Bower identisch und fügt dem Befehl, den Sie zum Installieren eines Pakets verwenden, ein Flag hinzu.

Als Entwicklungsabhängigkeit installieren

Um ein Paket als Entwicklungsabhängigkeit festzulegen, fügen Sie das Flag --save-dev, z.B.

Das Paket wird auf die gleiche Weise installiert, wie Sie es bereits gesehen haben, aber es wird wie folgt in die Liste der devDependencies in Ihrer "package.json" - Datei eingefügt:

Als Produktionsabhängigkeit installieren

Als Produktionsabhängigkeit installierenUm ein Paket als eine Produktionsabhängigkeit festzulegen, addieren Sie das Flag --save, z.B.

In diesem Fall wird das Paket der Liste der Abhängigkeiten in der "bower."  Datei hinzugefügt:

Hinweis: Wenn Sie npm-Pakete global mit dem Flag -g installieren, müssen Sie sich keine Gedanken über die Verwendung der Flags --save und --save-dev machen.

Pakete aktualisieren

Das Aktualisieren von Paketen ist ebenfalls ein einzeiliger Befehl für Bower und npm.

Über 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:

Um stattdessen global installierte Pakete zu aktualisieren, fügen Sie das Flag -g hinzu:

Sie können auch den Namen des Pakets angeben, um alle Ihre Pakete gleichzeitig zu aktualisieren.

Um alle Pakete in einem bestimmten Projekt zu aktualisieren, richten Sie Ihr Terminal auf seinen Stammordner und führen Sie Folgendes aus:

Und um alle Ihre global installierten Pakete zu aktualisieren, gehen Sie wie folgt vor:

Über Bower

Das Aktualisieren von Bower-Paketen entspricht im Wesentlichen dem von npm.  Führen Sie im Stammordner Ihres Projekts, in dem sich Ihr Ordner "bower_components" befindet, diesen Befehl aus:

Die neueste Version wird automatisch heruntergeladen und in den Ordner "bower_components" hinzugefügt.

Verwendung von npm und Bower Packages

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 verwenden würden, um Assets normal einzuziehen, d. h. Über skript- oder link-Elemente in Ihrem HTML, Dateien direkt aus Ihrem "bower_components" -Ordner zu laden.

Das ist jedoch nicht optimal und es gibt bessere Möglichkeiten, das zu tun.  Sie könnten beispielsweise alle von Ihnen verwendeten JS-Dateien aus Ihren Bower-Paketen in eine komprimierte Datei zusammenführen und diese stattdessen laden.

Im nächsten Tutorial zur Automatisierung mit Aufgabenläufern finden Sie eine Demonstration der Vorgehensweise.

Pakete, die über npm installiert werden, werden normalerweise über Befehlszeilen- oder Task Runner-Skripts verwendet.

Verschiedene Pakete haben ihre eigenen eingebauten Befehle, die Sie für alle Arten von Aufgaben wie Kompilieren, Komprimieren, Kombinieren und mehr verwenden können.  Diese paketspezifischen Aufgaben können wiederum automatisiert werden, indem Task-Runner eingerichtet werden, um mehrere Aufgaben gleichzeitig auszuführen.

In den folgenden Tutorials dieser Serie erfahren Sie, wie Sie npm-Pakete auf diese beiden Arten verwenden können.

Im nächsten Tutorial

Als Nächstes kommen wir dazu, wie Sie die Befehlszeile nutzen können, um Ihrem Front-End-Code eine völlig neue Effizienzstufe hinzuzufügen, sowohl bei der Entwicklung als auch bei der Ausführung.

Sie lernen, wie Sie die Befehlszeile für die Präprozessorkompilierung, die CSS-Autoprefixierung, die JS- und CSS-Dateioptimierung und die Kompilierung für HTML-Kurzschreib- und Templating-Befehle verwenden.

Wir sehen uns im nächsten Tutorial, Front-End-Code einschalten.

Advertisement
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.