Grunt ist ein Task Runner mit dem automatisiert verschiedenste Aufgaben erledigt werden können. Grunt ist sehr nützlich bei der täglichen Arbeit als Webworker/Webentwickler. Neben dem eigentlichen Programm besteht Grunt noch aus dem Kommando Zeilen Tool grunt-cli. Für Grunt gibt es tausende von Plugins, wobei es für viele Aufgaben unterschiedlichste Ausführungen gibt. Einige der Plugins werden durch die Entwickler von Grunt selbst zur Verfügung gestellt, die sogenannten „Contrib“ Plugins. Diese Plugins sind mit einem Stern markiert und beinhalten das Wort „contrib“. Die meisten Plugins werden aber von der inzwischen sehr großen Grunt-Community entwickelt und sind über den Node Package Manager (npm) verfügbar.
Hier erfährst du, wie man Grunt installiert, einrichtet und in Projekten einsetzen kann. Als Beispiel richten wir einen Grunt Task für die Minimierung und Kombinierung von CSS und JavaScript Dateien ein.
Wieso Grunt benutzen?
Es gibt viele Gründe warum man Grunt benutzen sollte, aber der wohl wichtigste ist die Automatisierung. Grunt erleichtert dir deine Arbeit. Es übernimmt für dich viele Routine Aufgaben wie z.B. die Verkleinerung (Minify) & Kombination (Combine) von CSS und JavaScript Dateien, verschiedene Tests, Bildverkleinerung und vieles mehr.
Grunt Installation
1. Zu allererst benötigst du node.js das du hier downloaden kannst. Nach der Installation von node.js steht das Kommando npm zur Verfügung.
Node.js ist eine serverseitige Plattform zum Betrieb von Netzwerkanwendungen. Insbesondere lassen sich Webserver damit realisieren. Node.js basiert auf der JavaScript-Laufzeitumgebung „V8“, die ursprünglich für Google Chrome entwickelt wurde, und bietet daher eine ressourcensparende Architektur, die eine besonders große Anzahl gleichzeitig bestehender Netzwerkverbindungen ermöglicht.
Quelle: http://de.wikipedia.org/wiki/Node.js
2. Nun öffnest du die Windows Eingabeaufforderung oder die Linux Console/Terminal und navigierst zu deinem Projekt Ordner. Falls du die Windows Eingabeaufforderung direkt in einem Projekt Ordner starten willst, öffne den Ordner im Windows Explorer, nun tippe oben in die Adresszeile „cmd“ und klicke die Taste Enter. Nun öffnet sich die Windows Eingabeaufforderung direkt in dem Ordner.
3. Tippe folgendes Kommando ein um grund-cli (Grunt Command Line Interface) zu installieren:
npm install -g grunt-cli
npm steht für Node Package Manager, der Packetmanager in dem alle node.js Module gehostet werden. Die Option -g bewirkt das dieses Modul global installiert wird. Also von jedem Systempfad aus erreichbar ist.
4. Navigiere nun zu deinem Projekt Ordner und erstelle die Datei „package.json“ mit folgendem Inhalt:
{
"name": "projekt",
"version": "0.1.0"
}
5. Tippe nun folgendes Kommando ein um Grunt in dieses Projekt zu integrieren:
npm install grunt --save-dev
Die Option --save-dev bewirkt das Grunt als Abhängigkeit für dieses Projekt automatisch in die vorher angelegte „package.json“ Datei eingetragen wird. Es wurde zusätzlich der Ordner „node_modules“ angelegt in dem sich Grunt nun befindet. Falls du mit Git arbeitest solltest du diesen Ordner in die gitignore (Ignorier Liste von Git) eintragen um unnötigen Balast zu vermeiden.
Grunt Plugins installieren
Nun ist euer Projekt mit Grunt ausgestattet. Jetzt wollen wir ein paar Grunt Plugins installieren die du unter http://gruntjs.com/plugins findest. Die Plugins die „contrib“ beinhalten und mit einen Stern markiert sind wurden direkt vom Grunt Team entwickelt.
Mit folgendem Kommando installierst du Grunt Plugins ins Projekt: Hier die Plugins grunt-contrib-clean, grunt-contrib-concat, grunt-contrib-copy, grunt-contrib-cssmin, grunt-contrib-jshint, grunt-contrib-uglify und grunt-contrib-watch
npm install grunt-contrib-clean --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-copy --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-watch --save-dev
In der „package.json“ Datei werden die Plugins automatisch als Abhängigkeit eingetragen und im „node_modules“ Ordner wird das Plugin eingefügt.
Grunt Tasks in der gruntfile.js erstellen
Jetzt kannst du die Datei „gruntfile.js“ im Hauptordner des Projekts erstellen. Es müsste nun die Datei „package.json“, „gruntfile.js“ und der Ordner „node_modules“ in deinem Projekt Ordner enthalten sein.
Wir legen nun einen Test Task an der unsere CSS und JavaScript Dateien zusammenfügen und minimieren soll.
Alle sources sind unter ./src und werden dann durch den Grunt Task nach ./dest generiert.
src
├── css
│ ├── 1.css
│ ├── 2.css
│ └── 3.css
└── js
├── 1.js
├── 2.js
└── 3.jsÖffne die gruntfile.js und füge folgenden Inhalt ein:
module.exports = function(grunt)
{
//Project configuration
grunt.initConfig(
{
pkg : grunt.file.readJSON('package.json'),
concat :
{
css :
{
options :
{
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
src : 'src/css/*.css',
dest : 'dest/css/style.css',
},
js :
{
options :
{
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
src : 'src/js/*.js',
dest : 'dest/js/jscript.js',
},
},
cssmin :
{
css :
{
options :
{
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
src : 'dest/css/style.css',
dest : 'dest/css/style.min.css',
}
},
uglify :
{
options :
{
banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build :
{
src : 'dest/js/jscript.js',
dest : 'dest/js/jscript.min.js'
}
}
});
//Load plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//Default task(s)
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
}
Nun ist die gruntfile.js erstellt.
Erläuterungen zur erstellten gruntfile.js:
- concat: Liste der Dateien die zusammengeführt werden sollen
- <%= pkg.name %>: Paketname, in diesem Fall „projekt“
- ’src/css/*.css‘: Alle Files mit der Endung „.css“ im Ordner „src/css/“
- src: Quelle
- dest: Ziel
- grunt.loadNpmTasks: Laden der benötigten Plugins
- grunt.registerTask: Festlegen was beim Aufruf von
gruntgeschehen soll
Grunt Ausführen
Jetzt kannst du im Projekt Ordner grunt aufrufen und es sollte folgendes Ergebnis erstellt werden.
dest
├── css
│ ├── style.css
│ ├── style.min.css
└── js
├── jscript.js
├── jscript.min.js
- die zusammengefügte Datei
- die zusammengefügte und minimierte Datei
Abschluss
Grunt ist ein sehr mächtiges Werkzeug das bei vielen Aufgaben helfen kann. Arbeitet man sich einmal in Grunt ein, will man es nie mehr missen.
Ich hoffe ich konnte euch einen kleinen Einblick in Grunt verschaffen und den Einstieg erleichten :)
