Grunt - JavaScript Task Runner
December 25, 2013
Grunt betitelt sich als JavaScript Task Runner und kann zahlreiche Aufgaben übernehmen, wie das zusammenführen verschiedener Dateien, die Arbeit eines Präprozessors für Coffeescript, Jade, Less oder Sass übernehmen oder Linter wie JsHint ausführen.
Grunt Installieren
Sofern man npm installiert hat, kann man Grunt durch den Befehl
<code>sudo npm install -g grunt-cli
</code>
installieren. Im Verzeichnis des Projektes, in dem man Grunt verwenden möchte, legt man dann die Abhängigkeiten an, die benötigt werden. Zum Beispiel um mit less
eine LESS Datei zu CSS zu kompilieren:
<code>cd /home/geronimo/projects/grunt-less-watch
</code>
Der Beispielcode kann kann so von Github geklont werden: git clone https://github.com/JonathanMH/grunt-less-watch.git
.
Im Verzeichnis des Projektes muss man nun noch Grunt inklusive der gewünschen Plugins installieren, in meinem Fall sieht die package.json
so aus:
<code>{
"name": "grunt-less-watch",
"version": "0.0.1",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "~0.4.1",
"grunt-contrib-less": "~0.7.0",
"grunt-contrib-watch": "~0.5.3"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jonathan M. Hethey",
"license": "BSD-2-Clause"
}
</code>
Diese installiert durch npm install
sowohl grunt, als auch grunt-contrib-less und grunt-contrib-watch.
Gruntfile.js Beispiel
Die auszuführenden Aufgaben werden in der Datei Gruntfile.js
definiert. Mein Gruntfile für dieses Projekt ist ausschließlich für LESS zu CSS, allerdings kann man beliebig viele Tasks definieren:
<code>module.exports = function(grunt) {
grunt.initConfig({
// running `grunt less` will compile once
less: {
development: {
options: {
paths: ["./css"],
yuicompress: true
},
files: {
"./css/style.css": "./css/style.less"
}
}
},
// running `grunt watch` will watch for changes
watch: {
files: "./css/*.less",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
</code>
In der offiziellen Dokumentation gibt es noch mehr Beispiele zu Gruntfiles.
Mit Grunt LESS kompilieren
Sobald die Installation sowohl global, als auch im Projekt vollzogen ist, können wir das Kommando grunt watch
ausführen um die im Gruntfile.js
definierten watch task auszuführen. Diese läuft nun jedes Mal wenn sich die style.less
Datei ändert und kompiliert sie in style.css
. Also von:
<code>body {
p {
color: magenta;
}
a {
color: pink;
}
}
</code>
zu:
<code>body p{color:magenta}body a{color:pink}
</code>
Im Terminal sieht man derweil folgenden Output beim Speichern der style.less
Datei:
Beispiel auf meinem GitHub account: Grunt Less Watch
Fazit
Grunt automatisiert einige wichtige Aufgaben im Workflow eines Webentwicklers und ist ein phantastisches Tool, das auch in Verbindung mit yo und bower die Yeoman Suite bildet.
In Zukunft werde ich ein paar Gruntfiles spezifische Einsatzzwecke hier teilen, um die beliebtesten und praktischsten Grunt Plugins abzudecken.