Grunt, getting started. Part 1

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.