GRUNT â Zeit sparen mit JavaScript
16. Februar 2014
Keine Lust stÀndig die gleichen langweiligen Dinge zu erledigen?
Sollte es sich um Aufgaben aus dem Bereich der Webentwicklung handeln, dann könnte Grunt Abhilfe schaffen. Damit lÀsst sich folgendes automatisieren:
- CSS und JavaScript Dateien zusammenkleben und minifizieren
- Kompilierung von LESS, SASS, CoffeeScript etc.
- Unit Testing
- eine Menge mehr
Installation und erste Schritte
Voraussetzung: Installation von Node.js
Grunt in der Kommandozeile installieren
npm install -g grunt-cli
Dadurch wird das Grunt Kommandozeileninterface global installiert â möglicherweise sind hierfĂŒr Admin-Rechte erforderlich (sudo bzw. unter Windows die Eingabeauffordung als Administrator ausfĂŒhren)
FĂŒr dieses Beispiel richte ich ein Demoprojekt ein. DafĂŒr einen Ordner anlegen und darin ein neues Node-Projekt initialisieren:
mkdir grunt-demo
mkdir grunt-demo/js
mkdir grunt-demo/css
cd grunt-demo
npm init
Die Abfragen nach npm-init alle mit Enter bestĂ€tigen. Dadurch wird eine initiale package.json Datei erstellt. Der nĂ€chste Befehl fĂŒgt dieser Datei eine AbhĂ€ngigkeit hinzu und installiert sie automatisch:
npm install grunt --save-dev
Die grundlegende Installation vom Grunt JavaScript Task Runner ist damit abgeschlossen. Damit nun tatsÀchlich Aufgaben erledigt werden können benötigt man Plugins.
Plugins installieren
Eine typische Aufgabe, die sich leicht mit Grunt erledigen lĂ€sst, ist das zusammenkleben von JavaScript und CSS Dateien. DafĂŒr muss das grunt-contrib-concat Plugin installiert werden:
npm install grunt-contrib-concat --save-dev
Fast fertig. Nun muss man Grunt nur noch mitteilen, was erledigt werden soll. Dies wird im Gruntfile.js definiert. Im Projektordner also folgende Datei erstellen:
Gruntfile.js
module.exports = function(grunt) {
// Grunt Konfiguration:
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
// Konfigurieren des concat Tasks
concat: {
js: {
src: [
// Alle JavaScript Dateien in diesem Ordner
"js/*.js",
],
// werden in dieser Datei zusammengefĂŒhrt
dest: "scripts.js",
},
css: {
src: [
// Alle CSS Dateien in diesem Ordner
"css/*.css",
],
// werden in dieser Datei zusammengefĂŒhrt
dest: "styles.css",
},
},
})
// Diese Plugins sollen geladen werden:
grunt.loadNpmTasks("grunt-contrib-concat")
// Was beim Aufruf von "grunt" passieren soll:
grunt.registerTask("default", ["concat"])
}
Grunt ausfĂŒhren
Die Vorarbeit ist erledigt. Um Grunt nun die oben beschriebenen Aufgaben erledigen zu lassen, ist nur noch folgender Befehl auf der Kommandozeile im Projektordner auszufĂŒhren:
grunt
Viel einfacher gehtâs kaum. Nun sollte sich der Inhalt sĂ€mtlicher JavaScript bzw. CSS Dateien in den Dateien scripts.js und styles.css wiederfinden.
Code fĂŒr dieses Beispiel auf github.com
Und nun?
- Grunt Plugins durchstöbern
- Grunt for People Who Think Things Like Grunt are Weird and Hard von Chris Coyier
- Supercharging your Gruntfile von Paul Bakaus
- A build tool for front-end projects von Frederic Hemberger