Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

Kommandozeile für Webdesigner: Einführung

by
Length:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Grasping the Basics

German (Deutsch) translation by John Nguyen (you can also view the original English article)

Vor einer langen Weile war das Arbeiten mit der Command Line außerhalb der Vorstellung eines Webdesigners. Es wurde meist nur genutzt für Dinge wie Serveradministration und Dateimanagement und all die Dinge, was sonst nichts mit dem durchschnittlichen Tagesablauf eines Webdesigners zu tun hat.  

Dies dürfte in der Vergangenheit der Fall sein, aber heute ist es nicht mehr weit weg von der Wahrheit.

Heutzutage gibt es tausende unglaubliche Command Line-unterstützte Tools, die speziell für Frontend-Sprachen und Workflows verfügbar sind. Der große Vorteil, sie bieten ein durchschnittliches Nutzen der Kommandozeile, was immer mehr zur essentiellen Fähigkeit eines Webdesigners wird.

some familiar command line tools
Einige meist-genutzten Command Line Werkzeuge

Ich gebe zu, als ich das erste mal diesen Werkzeugen begegnet bin, war ich ein wenig "befehlszeilenphobisch". I wurde durch die "für Programmierer nicht Designers"-Idee beeinflusst und ich würde immer einer anderen Option als der Command Line bevorzugen.

Dann, endlich, wagte ich den Eingriff, als ich ein Projekt, dass ich unbedingt wollte und die Interaktion mit der Befehlszeile benötigt wurde. Ich war anfangs ein wenig eingeschüchtert, aber zu meiner erfreulichen Überraschung fand ich mich schnell aufschreiend:

Das ist großartig! Ich weiß nicht, warum ich es nicht schon vor Jahren begonnen habe!

Heute nutze ich die Kommandozeile in fast jedem Webdesignprojekt und ich würde auch nicht ohne wollen.  Es ist in fast jeder Ebene des typischen Webdesignsprozesses unglaublich nützlich.

Über diese Serien

Aber hier ist die Sache, selbst jetzt wäre ich nicht fähig die meisten Dinge, die du in einem typischen "Erste Schritte mit der Befehlszeile"- Tutorial findest, zu tun, wenn mein Leben davon abhinge. Wenn du niemals lernst, wie man mkdir oder cd oder ls nutzt, macht es keinen Sinn. Die Wahrheit ist, als ein Webdesigner, brauchst du wirklich nichts von dem Zeug. Die einzigen Erfahrungen für die Kommandozeile sind diejenigen, welche deine Webdesignprojekte viel effizienter machen.

Das ist, warum diese Serien ist nicht über "Wie man obskure Befehle für Aufgaben zum Laufen bringt, die du niemals tust." Es ist auch nicht eine "komplizierter Entwicklungsprozess einfach gemacht für Designers" Art. Dies ist eine Serie besonders für Webdesigners, die dir zeigt, wie man die Werkzeuge, die unglaublich speziell für Webdesignprojekte nützlich sind, benutzt.

Einmal damit angefangen die Kommandozeile in dein Designprozess zu bringen, öffnet es dir eine ganz neue Welt der Optionen, eine enorme Einsparung deiner wertvollen Zeit und ich verspreche, dass du niemals zurückblicken wirst.

Warum ist die Kommandozeile großartig fürs Webdesign

Durch diese Anleitungsserie wirst du den Kommandozeilenprozess lernen, welches deinen Weg, den du zum Webdesign annäherst, ändert.  

Nachdem du mit den Grundlagen vertraut wirst, springen wir direkt in die praktischen Fertigkeiten, die du gleich nutzen kannst. Wenn du einen Blick auf jedes der Themen, die wir behandeln, wirfst, wirst du anfangen ein Bild, warum die Kommandozeile ein Muss fürs Webdesign ist, sehen.   

Die Hauptthemen

Lasst uns einen schnellen Blick durch die Themen, die wir in dieser Serie behandeln, werfen. Es gibt fünf Hauptthemenbereiche:

1. Bändigen von Drittanbieterpakete

Webdesigner nutzen oft Drittanbieterpakete wie jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css und eine lange Liste anderer. Vor der Kommandozeile, der Gebrauch dieser externen Pakete normalerweise meinte:

  1. Pflegen einer Liste von Lesezeichen, wo man die aktuellste Version von jedem Paket herunterladen konnte.
  2. Der manuelle Aufruf einer Webseite sagte, dass jedes Mal das Paket herunterzuladen, wenn du es bräuchtest.
  3. Ständiges Wiederholen des Prozesses, immer wenn ein Paket aktualisiert wurde.
  4. Manuelles Einführen der aktualisierten Version in jedes Projekt, wo es verwendet wurde.

Das Behandeln mit dem Paketmanagement händisch ist langsam und mühsam, aber mit der Kommandozeile gehört dieses der Vergangenheit an.

Du kannst jedes Paket direkt in deine Projekt ziehen, nur beim Tippen einiger Worte wie:

bower install jquery

Du kannst deine Pakete auf dem Laufenden halten mit dem Tippen der Wörter wie:

bower update jquery

Nie mehr manuelles Herunterladen von Paketen aus dem Web oder manuelles Aktualisieren, sobald sie sich geändert haben, und das ist nur ein kleiner Vorgeschmack auf die Dinge, die du dank dem Kommandozeilenpaketenmanagement machen kannst.

2. Verbessern des Front-End-Codes

Die drei Sprachen, die du häufig in jedem Webdesign siehst sind CSS, HTML und JavaScript. Die Kommandozeilenwerkzeuge bieten eine neue Möglichkeit unsere Produktion und die Lieferung des Codes in diesen Sprachen mehr effizient und leistungsfähiger zu machen.

Eines der mächtigsten Dinge, die wir mit der Befehlszeile für CSS nutzen können, ist den Präprozessor zu kompilieren, wie Stylus, Sass/ SCSS und LESS Mit der Kommandozeile kannst du schnell jede Präprozessordatei beim Tippen einiger Wörter kompilieren. Du kannst auch eine automatische Kompilierung aufsetzen, sodass deine CSS-Dateien bei jeder Änderung deiner Präprozessordateien neukompiliert werden.

Durch die Kommandozeile können wir auch unseren CSS- Arbeitsablauf mit Sachen wie Autopräfixen, Dateisäuberung und Komprimierung erweitern. In einer ähnlichen Art und Weise können wir auch unseren JavaScript mit Dateikonkatenation und Minifikation optimieren.

Und für HTML bekommen wir Zugang zu Sprachen wie Jade, was uns erlaubt HTML verkürzt zu schreiben und ein einfaches anspruchsvolles Templatesystem zu entwickeln, welches verhindert, dass wir mehrmaligen Code, welches durch das Projekt geht, zu schreiben.

3. Automatisierung mit Task Runners

Es ist großartig in der Lage zu sein, CSS mit wenig Worten zu kompilieren, dann JavaScript mit weiteren wenigen Worten zu minimieren. Aber wenn Dinge wirklich anfangen supermächtig zu werden, ist wenn du alles, was du für dein Projekt brauchst, mit einem einzigen Befehl ausführen kannst.

Durch das Nutzen eines Etwas namens einem "Task Runner", kann ein einziges Kommandowort wie gulp oder grunt gesetzt werden, um deine Präprozessordateien zu kombinieren, autopräfixieren, säubern und das resultierende CSS zu komprimieren, nachdem deine Jadedateien in HTML kompiliert und deine JS-Dateien verkettet und minimiert sind - alles in einem Zeitraum von ein paar Sekunden.

Du kannst auch einen Task Runner einrichten, um diese Sachen ohne Eingreifen hand zu haben. Nachdem Laufen eines Kommandos wie gulp watch oder grunt watch kannst du einfach vorangehen und an die rohen Dateien deines Projektes arbeiten, während im Hintergrund das Kompilieren und Optimieren automatisch abläuft.

Die Task Runners sind völlig flexibel und können nach Bedarf konfiguriert werden, sodass kein Ende an Möglichkeiten, wie du dein Projekt aufsetzt, besteht. Einfach feinabstimmen der Dinge für jede gebrauchten Umstände.

4. Neuladen in Echtzeit, Browsersynchronisation & Testen auf vielen Geräten

Dank dem Live Reloading brauchst du nicht mehr den Aktualisierbutton zu drücken und du kannst dich auf die Geschmeidigkeit, den Echtzeitfeedback an deinen Designänderungen, die von dir gemacht wurden, konzentrieren. 

Nachdem du die Automatisierung mit dem Task Runner in Gang gebracht hast, kannst du einen Live Reload mitten in deine Konfiguration, die du für deine Projekte erstellt hast, hinzufügen. Du kannst genau entscheiden, was beim Neuladen in Echtzeit ausgelöst wird, sei es Präprozessorenkompilierung, HTML-Änderungen oder alles was du verlangst.

Als ein Teil der Aktivierung des Live Neuladens, wirst du auch eine Vorschau auf deinem lokalen Host zu sehen bekommen, z.B. eine Simulation des Webhost auf deiner lokalen Maschine.  Das ist großartig, um sicher zu stellen, dass alles wie erwartet über die https:// -Protokolle, im Gegensatz zu file:// - Protokollen, läuft.

Darüberhinaus wirst du auch etwas über den Ablauf der Browsersynchronisation lernen, wobei du eine URL bekommst, die du in mehrere Browser stanzen kannst und sich miteinander synchronisieren. Zum Beispiel, klick einen Nav-Buttons auf Chrome an, dann sieh, wie sich Firefox, Opera und Safari gleichzeitig auf die selbe Aktion verhalten.

Diese Browsersynchronisation ist auch nicht auf ein Gerät beschränkt. Du kannst auch auf die selbe URL mit deinem Tablet, Phone und jedes andere Gerät bei der selben Verbindung gehen und dabei hat jedes einzelne Display eine synchronisierte Vorschau. Das alles kommt zusammen, um dir den perfekten Setup für beide Crossbrowser- und Crossgerätentesten zu geben. 

Und weil du das auf dem Taskrunnersetup baust, kommt es alles mit zwei Befehlen wie grunt start oder gulp start.

5. Einrüsten neuer Projekte

Manuell einem neuen Projekt mit einem Gerüst zu versehen, kann irgendwie schmerzhaft sein. Deinen gesamten Ordner und die Dateienstruktur aufzusetzen und die Dateien zu verbinden und zu konfigurieren, um miteinander arbeiten zu können, können sehr zeitraubend sein.

Mit dem Nutzen der Kommandozeile jedoch, kannst du das Gerüst sekundenschnell aufsetzen, perfekt dann, wenn du ein beliebtes Drittanbieterframework und Startercode wie Foundation, Bootstrap, HTML5 Boilerplate und Google Web Starter Kit nutzen willst.

Mit diesen Methoden werden wir abdecken, dass deine neuen mit einem Gerüst ausgestatteten Projekte nicht nur all den Code hat, den es braucht, sondern auch ihre Taskrunner so voreinstellen, dass automatisch kompiliert wird und die Vorschau aus dem Localhost fertiggestellt werden, sodass diese betriebsfertig herausgeschickt werden kann.

Weiter geht's

Genau dann, wenn du bereit bist, werde ich dich in dem ersten Tutorial sehen.

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