18. März 2014
Workflow optimieren mit Grunt.js
Wer viel mit CSS und JavaScript arbeitet weiß, wie oft man beim Entwickeln einer Webapp bestimmte Arbeitsschritte wiederholt. Damit man das nicht jedes Mal von Hand machen muss, kann man einen Großteil dieser Prozesse automatisieren.
In diesem Beitrag zeige ich euch an einem Beispiel, wie man mit Grunt.js den eigenen Workflow verbessern und unnötig lange Arbeitsphasen verkürzen kann. Voraussetzung für das Arbeiten mit Grunt.js ist eine installierte Version von Node.js, die meisten Erweiterungen benötigen eine Node Version von 0.4.x oder höher. In diesem demonstrativen Beispiel werden wir unser Grunt so einrichten, dass es für uns all unsere JavaScript-Dateien auf Fehler durchsucht und uns danach eine „minified“, also verkleinerte Version unserer JavaScript-Datei ausgibt.
Grunt installieren und einrichten
Als ersten Schritt installieren wir die Grunt-CLI (Command Line Interface) global, sodass wir in jeglichen Verzeichnissen damit arbeiten können.
(Nachfolgende Codebeispiele sind in der node.js Command Prompt einzugeben)
npm install -g grunt-cli
Als Nächstes brauchen wir zwei essentielle Dateien, package.json und Gruntfile.js, welche beide im root-Verzeichnis unseres Projektes abgelegt werden müssen. In unserer package.json geben wir unter anderem an, wie unser Projekt benannt ist, welche Version aktuell ist und von welchen Erweiterungen unser Projekt abhängt. Hier ein Beispiel und guter Ausgangspunkt für unsere package.json:
{
"name": "unser-projektname",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.4",
}
}
In dem Objekt „devDependencies“ geben wir an, welche Erweiterungen benötigt werden, um unser Projekt auszuführen. Dazu gleich etwas mehr. Nun aber navigieren wir in unser Projektverzeichnis und installieren dort lokal die aktuelle Version.
npm install grunt --save-dev
Durch die Flag „–save-dev“ fügt Grunt das installierte Modul automatisch zu unseren devDependencies in der package.json hinzu. Um sicher zu stellen, dass Grunt richtig installiert worden ist, können wir die aktuelle Version abfragen.
grunt --version
Jetzt benötigen wir zwei Erweiterungen für Grunt, JSHint und Uglify. JSHint überprüft JavaScript-Dateien auf Syntaxfehler, Uglify ist ein Minifier für JavaScript. So lassen sich beide Plugins installieren.
npm install grunt-contrib-jshint grunt-contrib-uglify --save-dev
Jetzt sollte unsere package.json so aussehen:
{
"name": "unser-projektname",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.2"
}
}
Danach erstellen wir unsere Gruntfile.js, diese sollte für unser Beispielprojekt so aussehen:
module.exports = function(grunt) {
// Projektkonfiguration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: 'unser/projekt/src/**/*js'
},
uglify: {
options: {
banner: '/* !<%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Das Plugin laden, welches die "uglify"-Task zur Verfügung stellt.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Das Plugin laden, welches die "jshint"-Task zur Verfügung stellt.
grunt.loadNpmTasks('grunt-contrib-jshint');
// Standard-Tasks. Werden ausgeführt, wenn wir grunt starten.
grunt.registerTask('default', ['jshint', 'uglify']);
};
Unser Projekt testen!
Wenn wir jetzt eine JavaScript-Datei in den Ordner „src“ in unserem Projektordner legen, können wir das Ganze ausführen. Das geht so:
grunt
Wenn wir alles richtig gemacht haben, erhalten wir folgende Ausgabe:
Running "jshint:files" (jshint) task >> 1 file lint free. Running "uglify:build" (uglify) task File app/build/lint-ugly.min.js created: 5.75 kB → 2.01 kB Done, without errors.
JSHint zeigt uns an, dass die überprüfte Datei keine Fehler enthält, Uglify macht aus einer Dateigröße von 5.75 kB eine komprimierte Datei mit nur 2.01 kB.
Wie geht’s weiter mit Grunt?
Es lässt sich noch so viel mehr machen, mehr als man jemals in einem Blogbeitrag erfassen könnte. Auf der Webseite lässt sich jedoch ein guter Überblick über die Möglichkeiten gewinnen. Dazu hier die offizielle Liste aller Grunt-Plugins.
