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
2. 25.11.2014 @HeikoMamerow 2 Vortrag: Einführung in Grunt Heiko Mamerow Freelancer Frontend-Entwickler WordPress Genießer
3. 25.11.2014 @HeikoMamerow 3 Vortrag: Einführung in Grunt 1. WTF 2. Installation 3. Konfiguration 4. Einsatz
4. 25.11.2014 @HeikoMamerow 4 Vortrag: Einführung in Grunt 1. WTF
5. http://gruntjs.com
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...
7. 25.11.2014 @HeikoMamerow 7 Vortrag: Einführung in Grunt 2. Installation Das Folgende wird nur einmalig Installiert.
8. Vorbereitung node.js Ubuntu: sudo apt-get install nodejs npm Ubuntu: sudo apt-get install npm
9. Grunt CLI Ubuntu: sudo npm install -g grunt-cli
10. 25.11.2014 @HeikoMamerow 10 Vortrag: Einführung in Grunt 3. Konfiguration Das Folgende wird bei jedem neuen Projekt durchgeführt.
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.
12. package.json
13. 3. Konfiguration Gruntfile.js ✔ Befehl: Touch Gruntfile.js ✔ Grunt & Plugins installieren ✔ Tasks in Gruntfile.js anlegen
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! ;-)
15. Tasks in Gruntfile.js anlegen • Gruntfile.js im Editor öffnen. • Beispielaufbau einer Gruntfile.js
16. Tasks in Gruntfile.js anlegen
17. 4. Einsatz Beispiel-Plugin: px_to_rem Automatische Berechnung von px in rem
18. DANKE! :-)