Im folgenden Beitrag (Teil 1 meines Tutorials) geht es um Grunt, oder genauer gesagt,
um dass Einrichten von Grunt unter Windows. Dazu gehören auch Node.js und Git.
Kurz ein paar Worte zu Grunt selbst. Grunt ist ein JavaScript Taskrunner.
Einmal für ein Projekt eingerichtet, kann euch Grunt sehr viel Arbeit abnehmen.
Dazu müsst ihr einfach nur ein Gruntfile anlegen und dort dann festlegen, welche
Tasks Grunt für euch abarbeiten soll. Grunt bietet euch dafür eine Vielzahl
an nützlichen Plugins. Unter anderem gibt es Plugins zum minifizieren von HTML, CSS und JS Dateien, zum kompremieren von Bildern, zum kompilieren von SASS/LESS zu CSS oder CoffeeScript zu JavaScript und noch sehr viel mehr.
In dem Gruntfile legt ihr dann, wie schon gesagt, nur noch fest, welche Plugins/Tasks alle zum Einsatz kommen sollen und konfiguriert diese. Wenn ihr Grunt nun startet, werden diese Tasks in der von euch vorgegeben Reihenfolge abgearbeitet.
Ihr könnt so also ganze Arbeitsabläufe automatisieren! Das
ist nicht nur super praktisch, sondern spart euch Zeit, schont eure Nerven und
kann zudem auch eure Fehlerqoute verringern.
In diesem Beitrag soll es erst einmal nur um die Installation gehen. Die
fand ich als Anfänger in diesem Bereich nämlich schon ziemlich tricky! Ich kann
natürlich nicht garantieren, dass der hier aufgezeigte Weg der beste ist, oder
bei jedem funktioniert, aber auf meinem Windows 8 Rechner läuft alles nach
Wunsch.
Um Grunt nutzen zu können müsst ihr euch zunächst Node.js installieren. Geht dazu einfach auf die offizielle Webseite und klickt auf „INSTALL“.
Ihr erhaltet eine Datei und führt diese aus.
Folgt den Installationsanweisungen und nehmt als Verzeichnis am besten das
vorgeschlagene Standardverzeichnis, dann sollten auch alle Pfade hier im
Beitrag so für euch passen.
Habt ihr Node.js installiert wird es auch schon spannend. Ihr müsst nämlich
eine Path-Systemvariable einrichten, wenn ihr nicht mit der Node-Konsole
arbeiten wollt.
Path ist die Systemvariable, die Windows verwendet, um über die Befehlszeile,
bzw. die Konsole, nach ausführbaren Dateien zu suchen. In diesem Fall die
node.exe. Öffnet ihr die Windows Konsole (Windowstaste + R, cmd.exe eingeben
und „OK“ klicken) ohne diesen Schritt, dann könnt ihr Befehle für Node (in
diesem Fall einfach mal „npm list -g“) zwar eingeben, aber ihr werdet die
folgende Fehlermeldung erhalten: „Der Befehl npm ist entweder falsch
geschrieben oder konnte nicht gefunden werden.“.
Und genau deshalb brauchen wir die Path-Systemvariable. Und so geht’s (Unter
Windows 8):
- Schritt 1: Den Mauszeiger in die rechte obere Ecke des Bildschirms ziehen und
auf die Lupe klicken.
- Schritt 2: Dort im Eingabefeld „Systemsteuerung“ eingeben und anklicken.
- Schritt 3: Im geöffneten Fenster auf „System“ klicken und dort dann links auf „Erweiterte
Systemeinstellungen“.
- Schritt 4: Im Fenster „Systemeigenschaften“ dann den Reiter „Erweitert“ auswählen
und auf „Umgebungsvariablen“ klicken.
- Schritt 5: Nun unter „Systemvariablen“ nach „Path“ suchen und auswählen, im
Anschluss dann auf „Bearbeiten…“ klicken. Im Feld „Wert der Variablen“ müsst
ihr nun folgendes eingeben:
C:\Program Files\nodejs\
Steht im Feld „Wert der Variablen“
bereits etwas eingetragen, dann schreibt ihr ans Ende einfach ein Semikolon und
danach dann C:\Program Files\nodejs\
Existiert noch gar keine Path-Systemvariable, dann klickt ihr einfach auf „Neu…“,
tragt bei „Name der Variablen“ das Wort „Path“ ein und unten dann wie schon beschrieben
C:\Program Files\nodejs\
Hier gibt es zum Thema Systemvariable auch für andere Windows Versionen eine ausführliche Schritt-für-Schritt-Anleitung.
Öffnet nun erneut die Konsole und gebt zum Testen noch einmal npm list -g ein.
Wenn ihr alles richtig gemacht habt, dann sollte nun keine Fehlermeldung mehr
erscheinen, sondern eine ziemlich lange Liste und ihr könnt nun die nächsten Schritte
der Grunt Installation angehen.
Falls nicht eh schon vorhanden, müsst ihr euch nun auch noch Git installieren.
Geht dazu einfach auf die Webseite und zieht euch das neueste Release. Nun
öffnet ihr die exe und folgt wieder den Installationsanweisungen. Auch hier
würde ich das vorgeschlagene Verzeichnis wählen. Im Fenster „Select Components“
müsst ihr darauf achten, dass „Git Bash Here“ und „Git GUI Here“ ausgewählt
sind. Beendet nun die Installation. Jetzt sollte auf eurem Desktop ein neues
Icon erscheinen mit dem Namen „Git Bash“.
Für andere Programme (z.B. PhpStorm von JetBrains) macht es Sinn Git, genauso wie zuvor auch
schon Node.js, global verfügbar zu machen. Dazu müsst ihr wieder die Path-Systemvariable
bearbeiten. Dieses mal unterscheidet sich lediglich Schritt 5 zur Prozedur von vorhin.
Ihr fügt nun folgendes zur Path-Systemvariable hinzu:
;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd
Das war es auch schon. Hier gibt es dazu noch eine schöne Kurzanleitung.
Jetzt können wir den folgenden Prozess entweder über die Windows Konsole (Wenn
ihr die Path-Systemvariable angepasst habt), oder natürlich auch die Git Bash
Konsole erledigen. Entscheidet euch nun für eine Konsole und startet diese. Schaut
jetzt noch mal nach, ob euer npm (Node Packaged Modules) auch auf dem neuesten Stand
ist. Gebt dazu einfach folgendes ein in die Konsole:
npm update -g npm
Nun müsst ihr nur noch:
npm install -g grunt-cli
eingeben und die Installation vom „Grunt command line interface“ ist auch schon abgeschlossen.
Für weitere Infos zu dem Thema schaut am besten auch mal hier vorbei. Wenn ihr euch fragt, wieso -g (global) und nicht lokal, dann bitte hier mal reinschauen.
Jetzt habt ihr Grunt, Node.js und Git erfolgreich (global) auf eurem Windows System installiert!
In Teil 2 wird es darum gehen, Grunt lokal bei einem Projekt zu installieren und anzuwenden. Wir werden ein „Hallo Welt“ Projekt anlegen, ein „Gruntfile.js“ erstellen, Tasks (grunt-browser-sync, grunt-contrib-watch und grunt-sass) definieren und die nötigen Plugins mit npm installieren. Dazu schauen wir uns die „package.json“ näher an, bzw. werden eine „package.json“ erstellen.
Beispielhaft werden wir als Editor PhpStorm von JetBrains einsetzen, wobei natürlich jeder selbst entscheiden kann welchen Editor er einsetzen möchte. Wenn ihr dem Link folgt, könnt ihr eine 30 Tage Testversion laden.
Update: Bei der Installationsanweisung für Grunt gab es noch einen kleinen, aber entscheidenen Fehler! Dank dem Kommentar von Johannes ist mir der Fehler aufgefallen und gefixt.
Dieses Tutorial habe ich (auch als Folge des Fehlers) nun in zwei Bereiche gegliedert. Teil 1 dieses Tutorials befasst sich ausschließlich mit der globalen Installation von Grunt, Node.js und Git und in Teil 2 wird Grunt dann projektbezogen lokal installiert und angewandt werden.
Hier noch ergänzend zur Thematik „JS Taskrunner“ ein sehr schöner Link, der sich mit dem Thema beschäftigt und neben Grunt auch noch andere Taskrunner vorstellt. Mit Hilfe von Beispielen wird verglichen und Unterschiede aufgezeigt. Wer sich für das Thema interessiert, sollte hier mal einen Blick drauf werfen.
Endlich ist es soweit. Die neue ROCKWOOL Planungshelfer App
ist für iOS und Android erschienen. Nach Gem Pile (ein Ein-Mann-Privatprojekt) ist
das meine zweite Smartphone und Tablet App, an der ich (als Programmierer und
Entwickler) mitwirken durfte. Und im Gegensatz zu Gem Pile gibt’s die Rockwool
Planungshelfer App nicht nur im Google play Store für Android Devices, sondern
auch für iOS im Apple App Store über iTunes. Infos zur App und die aktuelle
Pressemitteilung bekommt ihr auf der offiziellen ROCKWOOL Webseite. 
