Grunt ist ein Task Runner, der auf Node.js basiert und über die Konsole ausgeführt wird, wobei Entwicklungs- und Produktionscode getrennt sind und zahlreiche Module zur Verfügung stehen. Die Konfiguration erfolgt über die Dateien package.json und gruntfile.js, in denen Aufgaben wie das Minifizieren von JavaScript oder das Kompilieren von Sass definiert werden können. Trotz seiner Erweiterbarkeit kann die gruntfile.js in der Komplexität wachsen und die Installation kann Hotfixes erschweren.

1. Grunt
Niklas Köhler

2. Was ist Grunt?
Grunt ist ein so genannter „Task Runner“
Es basiert auf Node.js
Wird über die Konsole ausgeführt
Ist durch Module erweiterbar

3. Vorteile
Entwicklungs- und Produktionscode sind getrennt
Sehr leicht erweiter- und konfigurierbar
Unzählige Module verfügbar

4. Nachteile
Tasks werden in Reihe ausgeführt
Die Gruntfile.js kann bis ins unermessliche wachsen
Installation notwendig: Hotfixes werden dadurch
erschwert

5. Installation
1. Node.js
installieren
2. npm install -g grunt-cli ausführen (ggf. als root)
3. Fertig

6. Konfiguration
1. package.json
2. gruntfile.js

7. Die package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

8. Die gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
options: {
},
build: {
src: 'src/input.js',
dest: 'build/output.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

9. Tasks

10. Aufbau eines Tasks
grunt.initConfig({
uglify: {
// uglify task configuration goes here.
}
})

11. Aufbau eines Tasks mit Targets
grunt.initConfig({
uglify: {
foo: {
// uglify task "foo" target options and files go here.
},
bar: {
// uglify task "bar" target options and files go here.
},
}
})

12. Options in Tasks und Targets
grunt.initConfig({
uglify: {
options: {
// Task-level options may go here, overriding task defaults.
},
foo: {
options: {
// "foo" target options may go here,
overriding task-level options.
},
// uglify task "foo" target options and files go here.
}
}
})

13. Dateien laden & speichern
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js',
},
concat: {
'dest/b.js': ['src/*.js']
},
compass: {
src: ['sass/**/*.scss'],
filter: 'isFile',
dest: 'css/main.css'
},
build: {
src: ['src/<%= basename %>.js'],
dest: 'build/<%= basename %>.min.js'
},
footask: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
})

14. Nützliche Grunt Plugins
Watch
Tasty swig
Node Sass
load grunt config

15. Danke für Eure
Aufmerksamkeit