Advertisement
  1. Web Design
  2. Terminal
Webdesign

Die Kommandozeile für Web Design: Pakete von Dritten zähmen

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 Florian Fischer (you can also view the original English article)

Wir nutzen häufig Pakete von Dritten in unseren Web Design Projekten.

Wir laden fremdes CSS aus Projekten wie Bootstrap und Foundation, und JavaScript wie jQuery und Modernizr. Mit steigender Tendenz benutzen wir Pakete von Dritten als Teil des Entwicklungs-Prozesses, wie zum Beispiel Compiler für CSS-Präprozessoren oder Code Cleaning und Komprimierungs-Tools um die Lade- und Laufzeit unserer Websites zu maximieren.

All diese Pakete zu handlen kann schnell nervig werden: händisches Herunterladen, Dateien kopieren, updaten. Klar, wir bekommen es ans Laufen, aber es ist zeitfresssend und diese Schwerfälligkeit führt häufig dazu in Projekten veralteten code zu verwenden. Aber es gibt einen besseren Weg, nämlich durch die Kommandozeile angetriebene Paket-Manager.

In diesem Tutorial wirst Du lernen, wie Du Pakete von Dritten mit einer Handvoll zwei bis fünf Wort Kommandos pflegen kannst.

Hinweis: Wenn Du nicht das erste Tutorial dieser Serie gelesen hast, Grasping the Basics, kann es hilfreich sein dieses zuerst durchzugehen, bevor Du hiermit beginnst.

Die “Zwei Großen” Paket Manager

Um loszulegen brauchst Du erstmal ein “Paket Management System”, beziehungsweise einen “Paket Manager”. Es gibt zwei Systeme, die Dir zur Auswahl stehen und sie sind die, mit Abstand, beliebtesten unter Web Designern, nämlich npm und Bower. Heute wirst Du lernen, diese beiden Systeme zu nutzen.

npm (via Node.js)

Du hast vielleicht von Node.js gehört, einem JavaScript basierten Beutel voller guten Dinge, das alles betreiben kann, angefangen bei Blog Plattformen, über IDEs, oder Media Center bis hin zu komplettenBetriebssystemen.

Mit einer Installation von Node.js wird automatisch der Paket Manager npm installiert, ein mächtiges, hilfreiches system, welches Du häufiger in dieser Serie als Mittel der Wahl sehen wirst.

Entgegen dessen, was Du vielleicht als Erstes denkst, npm steht nicht für “Node Package Manager.” Offiziell steht es für “npm is not an acronym” und oben auf der Website siehst Du bei jedem Neuladen kleine Wortspiele stehen, wie zum Beispiel “never poke monkeys” oder “newts parading majestically.”

Momentan bietet npm Zugriff auf 127,664 Pakete, welche für die unterschiedlichsten Zwecke gebaut wurden. Unter diesen Paketen sind zum Beispiel folgende für Web Design nützlich:

  • 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, jedoch ist npm ein unabhängiges Wesen und man könnte es auch mit dem gerade veröffentlichten IO.js verwenden.

Für Anfänger empfehle ich diesen Tutorials mit Node.js zu folgen, später möchtest Du vielleicht die anderen Optionen ausprobieren.

Bower

Meine Einführung die Kommandozeile für Paket Management zu verwenden kam durch Bower. Jemand brachte mich darauf indem er sagte

“Hast Du mal Bower ausprobiert? Das ist großartig!”

Ich hatte keine Ahnung, wofür man das brauchen könnte, also bin ich auf www.bower.io gegangen und ein Blick auf die Liste der verfügbaren Pakete reichte aus und mir ging ein Licht auf.

Die Bower Paket-Auswahl enthält unter Anderem:

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

Die Wahrscheinlichkeit das Du ein oder zwei dieser Pakete regelmäßig nutzt ist recht hoch. Bower macht es schneller und einfacher für Dich, dass das auch so bleibt.

Was denn nun Bower oder npm?

Manchmal findest Du ein Paket sowohl bei npm als auch bei Bower. Wenn das der Fall ist, welche Version solltest Du nutzen?

Beide Möglichkeiten installieren und updaten die Pakete, die Eine so schnell wie die Andere. Es gibt keine harten Regeln, die Bestimmen, welche Möglichkeit du nutzen sollst und letztlich wirst Du Deinen eigenen Weg entwickeln, wie Du die Dinge handhabst. Daher werde ich dir für den Anfang eine Faustregel vorgeben.

Aus der Web Design Perspektive macht es den Unterschied, wie Du die Pakete benutzt. Die zwei typischen Szenarios, die Du haben wirst sind Frontend Entwicklung und das Deployment.

Bower ist ausgelegt auf Frontend Paket-Management. Wähle also diesen Weg, wenn Du etwas suchst, dass vom Seitenbesucher im Browser konsumiert wird.

Auf der anderen Seite sind npm Pakete das Mittel der Wahl, wenn Du etwas bestimmtes nur während der Entwicklung brauchst und es nicht im fertigen Produkt verwendet wird.

npm und Bower installieren

Node.js und npm installieren

Zum Glück ist die Installation von npm total einfach, da npm automatisch mit Node.js installiert wird. Gehe auf http://www.nodejs.org und lade den Installer für deine Plattform herunter. Installiere es auf deinem Rechner und npm wird mit installiert und schon kannst Du loslegen.

Wichtig! Auch wenn Du schon Node.js installiert hast, folge den o.a. Schritten um sicher zu gehen, dass Du die aktuellste Version hast. Wenn Du mit einer veralteten Version unterwegs bist, kann es sein, dass manche Schritte dieser Artikelserie nicht funktionieren.

npm updaten

Die Wahrscheinlichkeit ist groß, dass eine neuere Version von npm verfügbar ist, als die die mit Node.js installiert wird.

Um sicher zu gehen, dass Du die neueste Version hast, führe folgenden Befehl aus:

Git / MsysGit installieren

Git ist, neben Node.js und npm, eine Grundvoraussetzung um Bower zu nutzen. Git ist auch Grundvoraussetzung für viele andere Web Design Pakete die Du finden wirst, also lass uns dein System vorbereiten, bevor wir weiter machen

Für OSX Benutzer

Gehe auf die Git Website, lade den Installer herunter und rufe ihn auf wie jeden anderen App Installer auch: http://git-scm.com/download/mac

Für Windows Benutzer

Um Bower unter Windows zu nutzen brauchst Du eine spezielle Version von Git für Windows namens msysGit. Klick den Download Button und lade den Installer herunter, aber führe ihn noch nicht aus: http://msysgit.github.io

Der Grund warum ich sage, dass Du ihn noch nicht ausführen sollst ist der, dass Du die richtigen Einstellungen wählen musst beim Installieren. Wenn Du den Bildschirm hier unten siehst, wähle Run Git from the Windows Command Prompt.

Weitere Informationen bezüglich msysGit installieren als Voraussetzung für Bower: Hinweis für Windows-Benutzer.

Bower installieren

Bower kann über folgenden Befehl durch npm installiert werden:

Mac Benutzer: Weil wir mit der Option -g Bower global installieren wollen, wirst Du wahrscheinlich sudo vor den Befehl schreiben müssen und anschließend Dein Passwort eingeben, wenn Du danach gefragt wirst.

Grundlagen von npm und Bower

Ein Projekt aufsetzen

npm und Bower arbeiten mit speziellen Manifest Dateien, welche Informationen über ein Projekt und einer Liste der benutzten Pakete enthalten. Bei npm Projekten heisst diese Datei “package.json” und in Bower Projekten ist es die “bower.json”. Der einfachste Weg diese Dateien zu erstellen ist es den init Befehl auszuführen. Genau das machen wir jetzt.

Via npm

Gehe auf der Kommandozeile in das Hauptverzeichnis Deines Projektes und führe folgenden Befehl aus:

Du bekommst einige Fragen gestellt, die Du in der Kommandozeile beantworten kannst. Auf Basis der Antworten wird dann die "package.json" Datei erstellt.

Erfahre mehr über den Befehl npm init auf: https://docs.npmjs.com/cli/init

Via Bower

Ebenfalls im Hauptverzeichnis deines Projektes auf der Kommandozeile folgenden Befehl ausführen:

Wie bei der Initialisierung durch npm wirst Du Fragen beantworten und entsprechend wird die "bower.json" Datei erstellt.

Erfahre mehr über den Befehl bower init auf: http://bower.io/docs/creating-packages/#bowerjson

Nach Paketen suchen

Mit dem initialisierten Projekt kannst Du nun anfangen Pakete rein zu holen. Um das zu tun musst Du die Pakete finden, entweder per npm oder Bower.

Du musst an der richtigen Stelle suchen und den genauen Namen des Pakets kennen, um im npm oder Bower Ökosystem, in der Lage zu sein es zu installieren oder aktualisieren.

Via npm

Du kannst nach Paketen, die Du mit npm nutzen willst, über die Suchleiste oben auf der npm Homepage suchen.

Es ist auch möglich, direkt auf der Kommandozeile zu suchen mit npm search <package>. Wie auch immer, ich persönlich finde es einfacher direkt auf der npm Website zu suchen.

Wenn Du das Paket gefunden hast, was Du nutzen möchtest, notiere Dir den Paketnamen.

Via Bower

Bower-Pakete kannst Du suchen auf http://bower.io/search/.

Notiere dir, wie bei npm, den Paketnamen des Pakets das du nutzen möchtest.

Neue Pakete installieren

Wenn Du ein Paket gefunden hast, das Du nutzen möchtest, bist Du bereit es zu installieren. Nun brauchst Du den Paketnamen, den Du Dir notiert hast. In den nachfolgenden Anweisungen benutzt Du diesen Namen, wann immer du <package> in einem Befehl siehst.

Via npm

Um lokal ein Paket zu installieren, z.B. im Projektverzeichnis, führe folgendes aus:

Das Paket wird heruntergeladen in einen Unterordner namens "node_modules" und damit verfügbar für Dein Projekt gemacht. Zum Beispiel:

Genauso wie Du ein Paket lokal installieren kannst, so kannst Du über einen Parameter npm Pakete global installieren.

Lokal installierte Pakete sind nur in Verfügbar im Kontext Deines Projektes, aber global installierte Pakete können auf deinem gesamten Rechner genutzt werden. Zum Beispiel kannst Du jede ".less"-Datei kompilieren, egal wo sie auf Deinem Rechner liegt, sobald Du "less" global installiert hast.

Pakete werden mit dem Parameter -g hinter dem Befehl global installiert:

Via Bower

Die Installation für Bower Pakete ist fast die gleiche wie bei npm. Benutze folgenden Befehl:

Der Unterschied liegt darin, das Bower Pakete in einem Unterodner "bower_components" abgelegt werden, zum Beispiel:

Da Du Bower benutzt, um Frontend-Pakete innerhalb spezifischer Projekte zu deployen, kannst Du alle Installationen lokal machen. Du brauchst daher keinen -g Parameter.

Mit Abhängigkeiten arbeiten

Falls Du Interesse hast ein npm oder Bower Projekt zu teilen oder zu kopieren/verschieben ist "dependency management" eine großartige Sache. Ich sage dir warum.

Du erinnerst Dich bestimmt an die Manifest Dateien die Du eben erstellt hast; “package.json” und “bower.json”. In jede dieser Dateien kannst Du eine Paketliste schreiben von denen Dein Projekt abhängt.

Du hast bereits gesehen, dass npm Pakete in einem Ordner namens “npm_modules” und die von Bower in “bower_components” landen. Das tolle daran ist, dass Du, wenn Du dein Projekt mit Anderen teilst, diese Ordner auslassen kannst. Solange Du deine Abhängigkeiten in den Manifesten definiert hast.

Damit kannst Du Dir unter Umständen einige hundert Megabytes sparen, was es einfacher macht dein Projekt hin und her zu bewegen.

Wenn jemand anderes an Deinem Projekt weiter arbeiten soll, kann er npm install ausführen und alle Pakete, aufgelistet in der “package.json” Datei, werden automatisch in einen neuen “node_modules” Ordner heruntergeladen.

Genauso wird der Befehl bower install automatisch alle Abhängigkeiten die in der “bower.json” Datei aufgelistet sind herunterladen und in einen neuen “bower_components” Ordner platzieren.

Abhängigkeiten: Produktion & Entwicklung

Es gibt zwei Typen von Abhängigkeiten:

  1. Abhängigkeiten in Produktion - im Kontext von Web Design meint das Pakete, die auf das Frontend deployed werden, z.B. Modernizr zur Cross-Browser Kompatibilität.

  2. Abhängigkeiten in der Entwicklung - im Kontext von Web Design meint das Pakete, die während der Entwicklung verwendet werden, z.B. LESS zur Kompilierung von .less Dateien.

Bower und npm lassen Dich Abhängigkeiten sowohl für die Produktion, als auch für die Entwicklung spezifizieren. Wie bereits erwähnt wirst Du Bower für Frontend-Pakete verwenden und npm für Pakete zur Entwicklung.

Die Methode um Abhängigkeiten zu definieren ist in npm und Bower die gleiche. Und zwar ein Parameter an den Befehl zu hängen, der ein Paket installiert.

Installation als Entwicklungs-Abhängigkeit

Um ein Paket als Entwicklungs-Abhängigkeit zu markieren füge den Parameter --save-dev hinzu. Zum Beispiel:

Das Paket wird auf dieselbe Art installiert, die Du schon kennst, aber zusätzlich wird es in die Liste der devDependencies in Deine “package.json” Datei geschrieben:

Installation als Produktions-Abhängigkeit

Um ein Paket als Produktions-Abhängigkeit zu markieren füge den Parameter --save hinzu. Zum Beispiel:

In diesem Fall wird es zu der Liste dependencies in der “bower.json” Datei hinzugefügt:

Hinweis: Wenn Du npm Pakete global mit dem -g Parameter installierst, brauchst Du Dir keine Sorgen machen, ob du entweder --save oder --save-dev benutzen solltest.

Pakete aktualisieren

Pakete aktualisieren ist ebenfalls nur ein Einzeiler bei Bower und npm.

Via npm

Für lokal installierte Pakete führe folgenden Befehl im Hauptverzeichnis aus, wo Dein "node_modules" Ordner liegt:

Für global installierte Pakete hänge stattdessen den Parameter -g an:

Du kannst auch den Paketnamen weglassen, so werden in einem Rutsch alle Deine Pakete aktualisiert.

Um alle Pakete in einem bestimmten Projekt zu aktualisieren, gehe auf der Kommandozeile in dessen Hauptverzeichnis und führe folgenden Befehl aus:

Und um alle global installierten Pakete zu aktualisieren:

Via Bower

Bower Pakete zu aktualisieren ist im Wesentlichen genauso wie bei npm. Im Hauptverzeichnis des Projekts, also das mit dem "“bower_components”" Ordner, führe folgenden Befehl aus:

Die aktuellste Version wird automatisch heruntergeladen und deinem "bower_components" Ordner hinzugefügt.

npm und Bower Pakete nutzen

Wenn Du einmal Deine Pakete installiert hast, wirst Du sicher wissen wollen, wie Du sie nutzen kannst, richtig?

Mit Bower Paketen kann der Prozess der gleiche sein, wie Du normalerweise JS/CSS via script oder link Elementen in deinem HTML einbindest und Dateien direkt aus Deinem “bower_components” Ordner lädst.

Dies ist jedoch nicht optimal und es gibt bessere Wege, damit umzugehen. Vielleicht möchtest Du alle verwendeten JS Dateien, die Du aus Deinen Bower Paketen nutzt, in eine komprimierte Datei zusammenfassen und nur noch diese laden.

Du wirst dazu eine Demonstration im demnächst erscheinenden Tutorial Automation with Task Runners sehen.

Pakete die über npm installiert wurden werden typischerweise per Kommandozeile oder "Task runner" benutzt.

Verschiedene Pakete bringen Ihre eigene Menge an Befehlen mit, die für alle möglichen Aufgaben genutzt werden können. Zum Beispiel: kompilieren, komprimieren zusammenfassen und mehr. Diese paketspezifischen Aufgaben können durch "task runner" automatisiert werden und dadurch viele Aufgaben zeitgleich ausführen.

Du wirst, in den nachfolgenden Tutorials dieser Serie, lernen npm Pakete auf beide Weisen zu benutzen

Im nächsten Tutorial

Als nächstes gucken wir uns an, wie Du durch die Kommandozeile deinen Frontend-Code auf die nächsthöhere Ebene der Effizienz bringen kannst. Sowohl wie Du ihn entwickelst, als auch wie er ausgeführt wird, wenn er fertig ist.

Du wirst lernen die Kommandozeile für Präprozessor-Kompilierung, CSS autoprefixing, JS und CSS Dateioptimierung und HTML Kompilierung für HTML Abkürzungen und Templates zu nutzen.

Wir sehen uns im nächsten Tutorial, Powering Up Front End Code.

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.