Vollzeitblogger

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.