grunt
TRANSCRIPT
![Page 1: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/1.jpg)
Niklas Köhler
Grunt
![Page 2: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/2.jpg)
Was ist Grunt?Grunt ist ein so genannter „Task Runner“Es basiert auf Node.jsWird über die Konsole ausgeführtIst durch Module erweiterbar
![Page 3: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/3.jpg)
VorteileEntwicklungs- und Produktionscode sind getrenntSehr leicht erweiter- und konfigurierbarUnzählige Module verfügbar
![Page 4: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/4.jpg)
NachteileTasks werden in Reihe ausgeführtDie Gruntfile.js kann bis ins unermessliche wachsenInstallation notwendig: Hotfixes werden dadurcherschwert
![Page 5: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/5.jpg)
Installation1. installieren2. npm install -g grunt-cli ausführen (ggf. als root)3. Fertig
Node.js
![Page 6: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/6.jpg)
Konfiguration1. package.json2. gruntfile.js
![Page 7: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/7.jpg)
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" } }
![Page 8: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/8.jpg)
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']); };
![Page 9: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/9.jpg)
Tasks
![Page 10: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/10.jpg)
Aufbau eines Tasks grunt.initConfig({ uglify: { // uglify task configuration goes here. } })
![Page 11: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/11.jpg)
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. }, } })
![Page 12: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/12.jpg)
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. } }})
![Page 13: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/13.jpg)
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' } })
![Page 14: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/14.jpg)
Nützliche Grunt PluginsWatchTasty swigNode Sassload grunt config
![Page 15: Grunt](https://reader035.vdokument.com/reader035/viewer/2022081813/55a7963c1a28ab7a1f8b475f/html5/thumbnails/15.jpg)
Danke für EureAufmerksamkeit