Einführung in Grunt

Der Vortrag richtet sich an Frontend Entwickler:
1) Was ist Grunt?
2) Wie geht die Installation und Konfiguration?
3) Und wie lässt sich Grunt praktisch nutzen?

Vortrag beim WP Meetup Potsdam am 25.11.2014.

Transcript

1. Vortrag: Einführung in Grunt
   Potsdam, 25. November 2014
   

   View Slide

2. 25.11.2014 @HeikoMamerow 2
   Vortrag: Einführung in Grunt
   Heiko Mamerow
   Freelancer
   Frontend-Entwickler
   WordPress Genießer
   

   View Slide

3. 25.11.2014 @HeikoMamerow 3
   Vortrag: Einführung in Grunt
   1. WTF
   2. Installation
   3. Konfiguration
   4. Einsatz
   

   View Slide

4. 25.11.2014 @HeikoMamerow 4
   Vortrag: Einführung in Grunt
   1. WTF
   

   View Slide

5. http://gruntjs.com
   

   View Slide

6. Was ist Grunt?
   „The JavaScript Task Runner“
   Automatisierung von sich
   wiederholenden Aufgaben
   z.B.:
   Minifizieren, Zusammenführen, Verteilen,
   Konvertieren, Umrechnen, Präfixen, Strukturieren,
   Optimieren, Überwachen, Livereloaden, Testen...
   

   View Slide

7. 25.11.2014 @HeikoMamerow 7
   Vortrag: Einführung in Grunt
   2. Installation
   Das Folgende wird nur einmalig Installiert.
   

   View Slide

8. Vorbereitung
   node.js
   Ubuntu: sudo apt-get install nodejs
   npm
   Ubuntu: sudo apt-get install npm
   

   View Slide

9. Grunt CLI
   Ubuntu: sudo npm install -g grunt-cli
   

   View Slide

10. 25.11.2014 @HeikoMamerow 10
    Vortrag: Einführung in Grunt
    3. Konfiguration
    Das Folgende wird bei jedem neuen Projekt durchgeführt.
    

    View Slide

11. 3. Konfiguration package.json
    Eine Möglichkeit von vielen:
    ✔ In das Projekt-Verzeichnis wechseln
    ✔ Befehl: npm init
    ✔ Alle Abfragen bestätigen (enter)
    ✔ Datei package.json wurde angelegt.
    

    View Slide

12. package.json
    

    View Slide

13. 3. Konfiguration Gruntfile.js
    ✔ Befehl: Touch Gruntfile.js
    ✔ Grunt & Plugins installieren
    ✔ Tasks in Gruntfile.js anlegen
    

    View Slide

14. Grunt und Plugins installieren
    •
    Ubuntu: sudo npm install grunt --save-dev
    •
    Quelle: http://gruntjs.com/plugins (GitHub)
    •
    contrib-Plugins sind offiziell gepflegt
    •
    Ubuntu: sudo npm install --save-dev grunt-px-to-rem
    Es gibt sogar Grunt-Plugins für WordPress! ;-)
    

    View Slide

15. Tasks in Gruntfile.js anlegen
    •
    Gruntfile.js im Editor öffnen.
    •
    Beispielaufbau einer Gruntfile.js
    

    View Slide

16. Tasks in Gruntfile.js anlegen
    

    View Slide

17. 4. Einsatz
    Beispiel-Plugin: px_to_rem
    Automatische Berechnung von px in rem
    

    View Slide

18. DANKE!
    :-)
    

    View Slide