Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Einführung in Grunt

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.

29958f86da5d76e052520ccfc24dbde9?s=128

Heiko Mamerow

November 25, 2014
Tweet

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! :-)