Niklas Köhler

Grunt

Was ist Grunt?Grunt ist ein so genannter „Task Runner“Es basiert auf Node.jsWird über die Konsole ausgeführtIst durch Module erweiterbar

VorteileEntwicklungs- und Produktionscode sind getrenntSehr leicht erweiter- und konfigurierbarUnzählige Module verfügbar

NachteileTasks werden in Reihe ausgeführtDie Gruntfile.js kann bis ins unermessliche wachsenInstallation notwendig: Hotfixes werden dadurcherschwert

Installation1. installieren2. npm install -g grunt-cli ausführen (ggf. als root)3. Fertig

Node.js

Konfiguration1. package.json2. gruntfile.js

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" } }

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']); };

Tasks

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

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. }, } })

Options in Tasks und Targetsgrunt.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. } }})

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' } })

Nützliche Grunt PluginsWatchTasty swigNode Sassload grunt config

Danke für EureAufmerksamkeit