Yeoman – Frontend Development Workflow

Wer kennt es nicht, man möchte mit einem neuen Projekt beginnen, geht in den Explorer (Windows) und legt sich einen neuen Ordner an. Name: “CoolNewProject”. Dann Öffnet man seinen Browser, gibt in die Adressleiste “jquery.com” ein und lädt sich erstmal die aktuelle Version von jQuery herunter. Als nächstes folgen noch etliche andere Scripte/Frameworks/Bibliotheken usw. Nun fangen wir an, erstellen uns eine neue HTML Datei, vielleicht leer oder auch schon über ein Template im Editor unserer Wahl. Danach fangen wir an und binden unsere JS/CSS Dateien ein.

Alles in allem ein ziemlich mühseliger Prozess. Natürlich sehr überspitzt dargestellt, aber es gibt sicher noch etliche Entwickler die so arbeiten. Es ist auch nichts verwerfliches daran seine Projekte so aufzubauen.

Wie es anders gehen kann, möchte ich heute zeigen. Ich schreibe bewusst “kann”, weil das was ich heute zeigen möchte nur eine von vielen Möglichkeiten darstellt, den eigenen Workflow zu verbessern.

Stand der Dinge

Frontend Development oder zu Deutsch Frontendentwicklung ist heutzutage nicht mehr nur ein paar HTML Seiten mit CSS und JavaScript zu erstellen, diese dann an das Backend weiterzugeben um daraus Templates zu bauen, die dann in ein CMS eingetütet werden.

An dieser Stelle möchte ich kurz auf die Frage eingehen, was Yeoman eigentlich ist.

Kurze Antwort: “Really Awsome”. Da ich aber davon ausgehe, dass euch das nicht wirklich weiter hilft, vielleicht doch ein bisschen mehr Text.

Yeoman besteht aus 3 Komponententen.

• yo – Ist für das im engl. genannte scaffolding verantwortlich. Es erstellt die Ordner Struktur, legt die Dateien an. Schreibt die Grunt Tasks und löst Äbhängigkeiten mit Hilfe von Bower auf.

• grunt – Wird dazu verwendet um Projektrelevante Aufgaben zu automatisieren.

• bower – Löst Abhängigkeiten auf, so dass wir nicht mehr selbst alle notwendigen Scripte herunterladen und einbinden müssen.

Ich gehe von einem neu eingerichteten Windows Rechner aus. Das bedeutet, das manche Programme/Tools nicht mehr installiert werden müssen, sofern ihr diese schon habt.

Folgende Bereiche sollen durch den Artikel abgedeckt werden.

• Installation von NodeJS

• Installation von Git

• Installation Ruby

• Installation Compass (Sass eingeschlossen)

• Installation Yeoman, Grunt und Bower

• Kurze Einführung wie ihr Yeoman, Grunt und Bower benutzen könnt

NodeJS

Node ist eine auf der JavaScript Engine von Google (V8) basierende Plattform.. Diese kann dazu benutzt werden um komplette Websites auszuliefern und noch einigem mehr. Ich möchte aber an dieser Stelle darauf eingehen, wie wir Node nutzen können, um unserem Workflow die nötige Grundlage zu verschaffen.

Yeoman, Grunt und Bower nutzen NodeJS als Grundlage um ihre Tasks auszuführen. Genauer gesagt wird der NPM (Node Package Manager) verwendet ums die benötigten Packages herunterzuladen, die wir für Yeoman benötigen aufzulösen.

1. Wir laden uns von nodejs.org den Windows Installer runter.

2. Wir installieren Node

Bei Interesse… Es gibt so viele Dinge, die man mit Node anstellen kann.

• Technical About

• Documentation

• Node Community

• NPM Registry

GIT

Git wird benötigt damit NPM und Bower ordentlich funktionieren (u.a Download von Abhängigkeiten). Zur eigentlichen Versionierung eures Projekts muss Git allerdings nicht genutzt werden.

Für all diejenigen die noch nicht so warm mit git sind, kann ich nur unseren Artikel Git für Einsteiger wärmstens empfehlen.

Ruby

Wenn ihr nicht plant mit Sass oder Compass für euer CSS zu arbeiten, dann könnt ihr diesen Schritt getrost weglassen.

Aber ganz im Ernst ihr solltet wirklich Sass für euere Projekte verwenden.

Und bevor ich gesteinigt werde. Natürlich könnt ihr auch weiterhin Less verwenden, aber darauf gehe ich in diesem Artikel nicht ein.

1. RubyInstaller für Windows

Sass & Compass

Sass ist ein CSS preprocessor und Compass ein für Sass entwickeltes Framework. Für die unter euch, die noch nicht mit Sass gearbeitet haben, will ich kurz auflisten, welche Verbesserungen Sass für euer CSS bringt.

• Variablen

• Nesting

• Partials

• Mixins

• Extend / Vererbung

• usw.

Mehr Infos bekommt ihr auf http://sass-lang.com/guide und demnächst auf unserem Blog.

Sass und Compass sind als Ruby gem erhältlich. Also öffnen wir unsere Kommandozeile und geben folgende Befehle dort ein.

# Installiert uns die aktuelle stable Version von Ruby
gem update --system
# Installiert Compass mit seinen Abhängigkeiten
gem install compass


Yeoman, Grunt und Bower

Alles was jetzt noch bleibt ist Yeoman zu installieren. Hierfür verwenden den zu Anfang installierten NPM (Node Package Manager)

# Dieser kurze Befehl installiert uns die drei in der Überschrift genannten Tools
npm install -g yo

Unser erstes kleines Projekt mit Yeoman

Yeoman kommt von Haus aus mit sehr wenig Gepäck. Er hat nur das nötigste dabei um seine Arbeit zu machen. Soll heißen, er lässt seine ganzen „Generatoren“ zu Hause und holt diese nur ab, wenn wir diese auch benötigen.

Wir können uns einen Generator wie ein Plugin vorstellen. Dort wird vorgegeben wie die generierte Ordnerstruktur aussehen soll, welche Dateien der Generator liefert und welche Optionen er dem Anwender geben soll.

Ich gehe für unser Beispiel hier auf den Webapp-Generator ein und versuche Schritt für Schritt zu zeigen wie wir unser Test-Projekt aufsetzen können.

Los geht’s. Zuerst sollten wir uns einen neuen Ordner erstellen. Nennen wir ihn liebevoll „yo-webapp-test“. Danach öffnen wir die Eingabeaufforderung (Windows) und navigieren zu unserem eben neu erstellten Projektverzeichniss.

Meine Projektordner liegen auf dem Laufwerk „D“ unter html
C:\Users\klee> d:
D:\>cd html\yo-webapp-test

Jetzt sagen wir sagen wir in unserem Test-Verzeichniss einfach „yo“
D:\>cd html\yo-webapp-test>yo

Yeoman frägt uns, was wir gerne machen möchten

Damit sagen wir Yeoman das wir etwas machen möchten. Da wir aber noch nicht genau gesagt haben was wir eigentlich wollen, macht Yeoman uns ein paar Vorschläge.

Im Moment können wir noch relativ wenig tun, also navigieren wir uns mit den Pfeiltasten zu „Get me out of here“ und Bestätigen unsere Auswahl mit der Enter-Taste.

Nun holen wir uns den Webapp-Generator
npm install -g generator-webapp

Der Node Package Manager installiert uns jetzt den Generator zusammen mit seinen Abhängigkeiten. Diesen Schritt brauchen wir nur einmal auszuführen. Fortan steht er uns immer wieder zur Verfügung.

Um nun das Gerüst für unsere App zu generieren, tippen wir
yo webapp
in die Kommadozeile. Dieser Befehl sagt Yeoman, dass er den Generator für eine Webapp anwerfen soll.

Wir können selbst bestimmen, ob die optionalen Pakete installiert werden sollen

Yeoman frägt uns dann noch welche der optionalen Pakete er mitinstallieren soll. Im Webapp-Generator sind dies die HTML5 Boilerplate, jQuery, Bootstrap und Modernizr

Die optionalen Pakete können wir mit der Leertaste entweder Abwählen oder Auswählen. Wenn wir unsere Auswahl getroffen haben, bestätigen wir mit der Entertaste, dass wir fertig sind. Es werden nun einige Sachen installiert. Unter anderem auch einige Erweiterungen für Grunt, unseren Taskrunner.

Was haben wir den eigentlich nun alles?

• png, gif, jpeg optimierung
• eine sass (compass) watch die automatisch bei speichern unser sass in css generiert
• ein vorkonfiguriertes jshint
• CSS und JS konkatenation
• CSS und JS minification
• uvm

Schaut euch einfach mal den Inhalt eures Testverzeichnis an, dann bekommt ihr recht schnell einen Überblick, was alles vorhanden ist.

Spielen wir doch einfach ein bisschen herum. Zurück zur Eingabeaufforderung
grunt serve
Damit sagen wir unserem Taskrunner grunt, dass er unter anderem unseren eingebauten Testserver anwerfen soll und unsere Dateien auf Änderungen beobachten.

Wenn wir nun unsere Seite veröffentlichen wollten, könnten wir einfach
grunt
in der Eingabeaufforderung ausführen und grunt würde uns einen dist Verzeichnis erstellen, in dem alle unsere Projektdateien minifiziert, konkateniert, optimiert vorliegen. Natürlich nur die Dateien, die für den Release benötigt sind.

So ich hoffe, ich konnte euch einen guten Einstieg in Yeoman liefern.

In kommenden Artikeln, möchte ich gerne darauf eingehen, wie ihr Yeoman, grunt und bower an euere Bedürfnisse anpassen könnt.

Zusätzliche Informationen und Videos

• Better WebApp development through Tooling – Paul Irish / Google IO 2012

• Why Yeoman

• JavaScript Authoring Tooling – Paul Irish / Fluent 2013

• Clientside Package Management: Less Work, More Awesome – Dan Heberden / Google IO 2013

• Paul Irish on Web Application Development Workflow – HTML5DevConf 2011(?)

• Grunt Getting Started