Matthias Strolz - Agile Softwareentwicklung mit Scrum
http://matthias-strolz.de/grunt-projektorganisation-mit-javascript/
Export date: Sun Sep 22 12:38:23 2019 / +0000 GMT

Grunt - Projektorganisation mit JavaScript


Mein Script für die Skillmatrix hat inzwischen schon über 40 Zeilen Code und eine Abhängigkeit zu jQuery. Es kommt wahrscheinlich aus meiner Vergangenheit als Java-Entwickler aber ich werde den Drang nicht los, die beiden Dateien in eine sinnvolle Projektstruktur betten zu wollen. Dazu gehört die Organisation des Quellcodes ein Build-Prozess, Stylechecks mit JSHint und am liebsten auch ein Bisschen Testing.

Bei der Suche nach der Befriedigung dieser Bedürfnisse bin ich recht schnell bei Grunt gelandet. Bei dem Vortrag "Let Grunt do the work, focus on the fun!, von Dirk Ginader auf Slideshare stieß ich dann auf folgende Folie die mich vollends überzeugte:

slide-infrastructure

Grunt ist ein TaskRunner für JavaScript und erinnert im ersten Augenblick an Ant, dann an Maven und schließlich an Gradle. Es vereint also die Möglichkeit seinen Buildvorgang in Tasks abzubilden, die benötigten Resourcen und Tools automatisch zusammenzustellen und die Buildumgebung per Scripting einfach auf die gewünschte Projektstruktur abzubilden. Scriptsprache ist hier selbstverständlich JavaScript.

grunt-logo

Die Installation erfolgt über den PackageManager von NodeJs mit Hilfe einer einzigen Zeile:
npm install -g grunt-cli

Hiermit steht eine Art Laufzeitumgebung zur Verfügung. Der eigentliche TaskRunner wird dann pro Projekt aufgesetzt. Somit werden mehrere Projekte mit unterschiedlichen Grunt-Versionen ermöglicht. Die Definition oder Konfiguration des Projekts erfolgt in zwei Dateien, die im Quellverzeichnis liegen:

  1. package.json Die Datei,beschreibt das Projekt und dessen Abhängigkeiten . Hier stehen beispielsweise Name, Versionsnummer, die verwendete Grunt-Version oder Autor und Lizenz. Die Dateien können per grunt-init bzw. npm-init automatisch erzeugt werden.

  2. Gruntfile.js Ein JavaScript, das die Tasks definiert und konfiguriert. Hier wird beschrieben welche Tasks für den Buildprozess überhaupt zur Verfügung gestellt werden und wo die Tasks, (z.B. JSHint) die benötigten Quelldateien finden. Innerhalb der Gruntfile.js kann man auf Attribute der package.json zugreifen um beispielsweise Verzeichnis- oder Dateinamen aus dem Projektnamen oder der Versionsnummer abzuleiten.


Anleitungen zur Konfiguration der Dateien findet man im Getting Started Guide von Grunt. Am Beispiel der Skillmatrix wird der Aufbau der package.json deutlich:
{
"name": "skillmatrix",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
},
"description": "A webclient for the skillmatrix.",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "~0.4.4"
},
"author": "Matthias Strolz"
}

Nachdem Projekt und Abhängigkeiten in der package.json definiert wurden, kann man die benötigten Plugins über den NodeJS Packagemanager in sein Projekt importieren:
npm install

Die Dateien werden dann im Verzeichnis node_modules innerhalb des Projekts abgelegt.

In einem meiner letzten Posts habe ich die Funktionsweise des Stylecheckers JSHint beschrieben. Die Konfiguration, die ich dort für mein Projekt in Sublime angelegt habe, möchte ich gerne auch beim bauen mit Grunt verwenden. Dazu setze ich die option jshint: true in der Konfiguration des Tasks jshint. Die Tasks uglify, oder concat zum Zusammenführen und Minimieren der einzelnen Quelldateien, habe ich aus folgendem Beispiel entfernt.
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
...
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/<%= pkg.name %>/*.js'],
options: {
jshintrc : true
}
},
...
grunt.loadNpmTasks('grunt-contrib-jshint');
...
grunt.registerTask('test', ['jshint']);
};

Inzwischen habe ich eine projektartige Struktur. Mein Quellcode liegt im Verzeichnis src/skillmatrix. Es gibt einen Build Prozess, der automatische Stylechecks durchführt, meine Dateien zusammenführt und minimiert. Fehlen eigentlich nur noch automatisierte Tests. Selbstverständlich gibt es auch hierfür Grunt-Tasks.

Der Preis für diese Struktur sind die Konfigurationsdateien package.json, Gruntfile.js und .jshintrc sowie die Grunt-Module die ebenfalls innerhalb des Projektverzeichnisses abgelegt werden.
Post date: 2014-03-20 17:49:47
Post date GMT: 2014-03-20 15:49:47

Post modified date: 2014-03-20 17:54:01
Post modified date GMT: 2014-03-20 15:54:01

Export date: Sun Sep 22 12:38:23 2019 / +0000 GMT
This page was exported from Matthias Strolz - Agile Softwareentwicklung mit Scrum [ http://matthias-strolz.de ]
Export of Post and Page has been powered by [ Universal Post Manager ] plugin from www.ProfProjects.com