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.

Heiko Mamerow

November 25, 2014
Tweet

More Decks by Heiko Mamerow

Other Decks in Programming

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