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.

Shumway

Total verrückt! Als ich davon gelesen habe konnte ich es kaum glauben. Aber das irrwitzige Unterfangen ist tatsächlich schon ertaunlich weit fortgeschritten.
Mit Shumway wurde ein Renderer für das SWF-Dateiformat geschrieben, der ohne Flash Player Plugin in der Lage ist, Flash Inhalte darzustellen. Das Ganze ist im Moment nur ein Experiment, aber immerhin stehen dahinter "Mozilla Research" und eine eigene Community, die sich mit der Entwicklung beschäftigt. 
Ob Shumway wirklich Sinn macht bleibt abzuwarten, aber interessant ist das Thema in jedem Fall. Hier geht´s zur offiziellen Seite und weitere Informationen gibt´s hier.

Sublime Text 3 & Browser Preview

Wer mit Sublime Text 3 HTML-Code schreiben möchte, der will diesen auch bequem und auf direktem Weg im Browser testen. Ich möchte hier einen einfachen Weg zeigen, wie sich das über ein Build System realisieren lässt. Ganz ähnlich wie in meinem letzten Tutorial zum Thema: „Sublime Text 3 & JavaScript Build System“.

Öffnet den Sublime Text Editor und geht nun im Menü auf den Punkt „Tools“, und dann im Untermenü auf den Punkt  „Build System“ und im Anschluss auf „New Build System...“.

Nun solltet ihr eine neue Datei mit dem Namen „untitled.sublime-build“ erzeugt haben, wie ihr im folgenden Screenshot sehen könnt.

In diese neue Datei müsst ihr nun folgenden Code einfügen (Der Pfad ist natürlich davon abhängig wo ihr den Browser, in meinem Fall, den Mozilla Firefox installiert habt).

 {  
   "cmd": ["firefox.exe", "$file"],  
   "path": "c:\\Program Files (x86)\\Mozilla Firefox",  
   "selector": ["source.html"]  
 }  

Speichert die Datei mit STRG + S am folgenden Ort ab:

 C:\Users\[username in here]\AppData\Roaming\Sublime Text 3\Packages\User  

Den Dateinamen vor „.sublime-build“ könnt ihr euch frei aussuchen. Ich hab die Datei
„FirefoxPreview.sublime-build“ genannt. Das Ganze sollte jetzt also so aussehen:

Geht nun wieder ins Menü, unter „Tools“, „Build System“ findet ihr den neuen Menüpunkt
„FirefoxPreview“. Klickt diesen an, um euer Build System zu aktivieren.

Zum Testen könnt ihr euch ganz einfach eine kleine Hello World HTML Datei erstellen. Hier ein Beispiel:

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <title>Hello World</title>  
  </head>  
  <body>  
   Hello World  
  </body>  
 </html>  

Speichert die neue HTML Datei ab und öffnet diese nun mit der Tastenkombination STRG + B in eurem Browser. 

Falls ihr alles richtig gemacht habt, öffnet sich nun der Firefox und zeigt die HelloWorld Beispiel Seite an.

Bitte beachtet, dass dieses Tutorial für Windows Rechner geschrieben worden ist und vorraussetzt, dass ihr den Mozilla Firefox Browser bereits installiert habt. Das Ganze lässt sich natürlich auch für alle anderen Browser umsetzen. Dazu muss lediglich das Script für das Build System entsprechend angepasst werden.
Für Google Chrome hab ich folgendes Build System erfolgreich getestet:
 

 {  
   "cmd": ["chrome.exe", "$file"],  
   "path": "c:\\Program Files (x86)\\Google\\Chrome\\Application",  
   "selector": ["source.html"]  
 }  

Sublime Text 3 & JavaScript Build System

Wenn ihr mit Sublime Text 3 JavaScript schreiben wollt, werdet ihr schnell feststellen, dass eine entsprechende Console nicht vorhanden ist zum Debuggen. Es fehlt ein JavaScript Build System. Und genau hier möchte ich ansetzen und euch zeigen wie man ein neues Build System hinzufügt. Im Netz gibt es dafür schon einen ganzen Haufen an mehr oder weniger nützlichen Tutorials zu dem Thema, aber die meisten haben bei mir nicht funktioniert.

Bevor es losgehen kann müsst ihr, falls nicht schon geschehen, Node.js installieren. Geht dazu einfach auf http://www.nodejs.org/ und klickt auf „INSTALL“ und folgt dann den Anweisungen. 

Habt ihr Node.js erfolgreich installiert, öffnet den Sublime Text Editor und schaut im Menü unter dem Punkt „Tools“ nach „Build System“. Dort seht ihr nun eine ganze Reihe an Build Systems, wie z.B. für C++, Python, Ruby und viele andere. Nur eben nicht für JavaScript. Klickt nun, wie im folgenden Screenshot zu sehen ist, ganz unten auf den Menüpunkt „New Build System…“.

Nun solltet ihr eine neue Datei mit dem Namen „untitled.sublime-build“ erzeugt haben, wie ihr im folgenden Screenshot sehen könnt.

In diese neue Datei müsst ihr nun folgenden Code einfügen (Ggf. müsst ihr den Pfad in Zeile 3 anpassen, falls ihr bei der Installation von Node.js nicht den Standard-Ordner gewählt habt).

 {  
   "cmd": ["node.exe", "$file"],  
   "path": "c:\\Program Files\\nodejs",  
   "selector": ["source.js"]  
 }  

Eure neue Datei sollte nun wie folgt aussehen.

Speichert die Datei nun mit z.B. STRG + S unter dem Namen „Javascript.sublime-build“, oder „Node.sublime-build“ ab. Den Namen vor „.sublime-build“ könnt ihr euch frei aussuchen. Die Datei speichert ihr unter diesem Pfad hier ab:

 C:\Users\[username in here]\AppData\Roaming\Sublime Text 3\Packages\User  

Wenn ihr nun wieder im Menü auf „Tool“ und danach dann auf „Build System“ klickt, sollte in der Liste der Build Systems nun ein neuer Menüpunkt aufgetaucht sein. Wenn der Name von der eben neu erzeugten Datei „Javascript.sublime-build“ ist, steht nun unten in der Liste JavaScript als neuer Menpunkt. Ihr könnt jetzt noch auf genau diesen neuen Menüpunkt „JavaScript“ klicken und so das Build Script aktivieren, oder ihr startet Sublime Text neu, dann sollte Sublime Text das über den Menüpunkt „Automatic“ dank dem Selector auch automatisch hinbekommen. Siehe Screenshot:

Das war es eigentlich schon. Zum Testen könnt ihr einfach ein HelloWorld.js anlegen:

Drückt nun zum Testen STRG + B und ihr seht in der Console die Ausgabe „Hello World“.

Noch ein paar allgemeine Infos. Ich habe dieses Tutorial für die Version 3.047 von Sublime Text erstellt. Ich arbeite an einem Windows Rechner. Das Tutorial sollte aber sicher auch für Mac User funktionieren, nur müssen dann entsprechend die Pfade angepasst werden und die Tastenkombinationen sind entsprechend anders.

Gem Pile

Endlich ist es soweit. Ich habe mein erstes kleines Spiel mit dem Namen „Gem Pile“ bei Google Play für Android Smartphones veröffentlicht. 

Die Spielbeschreibung von Google Play:

Gem Pile ist ein klassischer Puzzler. Ziel des Spiels ist es, so viel Diamanten wie möglich zu sammeln.
Um die Diamanten abzugreifen, müssen mindestens 2 aneinanderhängende Edelsteine derselben Farbe ausgewählt werden. Und um richtig Kasse zu machen, schau dich nach großen, gleichfarbigen Edelsteinansammlungen um. Je mehr Steine du auf einmal sammelst, desto mehr Punkte landen auf deinem Konto. Ob die Diamanten dabei nebeneinander, oder übereinander liegen spielt keine Rolle, sie müssen nur direkt aneinander liegen.
Nach dem Einsammeln verschwinden die Diamanten vom Spielfeld und die Übriggebliebenen fallen herunter. Hast du eine Spalte komplett leer gesammelt, rücken die Diamanten von rechts nach und ein neuer Schwung Diamanten fällt auf das Spielfeld. Neben den verschiedenfarbigen Diamanten gibt es auch schlichte Steine die du nicht einsammeln kannst. Gelegentlich fallen von oben Bomben ins Spielfeld. Mit Hilfe der Bomben kannst du Steine und Diamanten gleichermaßen wegbomben und dich so aus kniffligen Situationen befreien.

Hast du eine bestimmte Anzahl an Diamanten eingesammelt, schaltest du automatisch das nächste Level frei. Insgesamt gibt es in dieser Version des Spiels neun Level, wobei jedes einen gesteigerten Schwierigkeitsgrad hat. Zunächst steigt nur die Vielfalt an farbigen Diamanten, später musst du dann nicht mehr mindestens zwei aneinanderhängende Edelsteine einsammeln, sondern drei. Für den Fall das du das nächste Level nicht freischalten konntest und keine aneinanderhängenden Edelsteine mehr auf dem Spielfeld liegen, bist du Game Over.

Screenshot:

Hier gibt es die App (kostenlos) und weitere Infos:

QR Code:

Und hier noch ein paar technische Fakten und Hintergründe:
Das Spiel ist, wie sollte es anders sein, ein Flash Projekt. Umgesetzt wurde es mit dem Flash Builder 4.6 in Actionscript 3 mit der Flex SDK 4.6 und AIR 3.6. Zum Einsatz kommt hier das Starling Framework zur besseren Unterstützung der Stage3D API. Die Soundeffekte sind mit Tom Vians as3sfxr umgesetzt und die Musik stammt von AMKstudios (auf Flash Kit). Gem Pile basiert grob auf dem Spiel "SameGame", bzw. "Chain Shot" aus dem Jahr 1985 von Kuniaki Moribe und wurde um zusätzliche Elemente wie Bomben und Steine ergänzt. Der Name Gem Pile bedeutet übersetzt in etwa Edelsteinstapel und bezieht sich auf die Spielsteine und deren Anordnung im Spiel.