Interne Präsentation zum Thema "Grunt"

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