Grunt 
Niklas Köhler
Was ist Grunt? 
Grunt ist ein so genannter „Task Runner“ 
Es basiert auf Node.js 
Wird über die Konsole ausgeführt 
Ist du...
Vorteile 
Entwicklungs- und Produktionscode sind getrennt 
Sehr leicht erweiter- und konfigurierbar 
Unzählige Module verf...
Nachteile 
Tasks werden in Reihe ausgeführt 
Die Gruntfile.js kann bis ins unermessliche wachsen 
Installation notwendig: ...
Installation 
1. Node.js 
installieren 
2. npm install -g grunt-cli ausführen (ggf. als root) 
3. Fertig
Konfiguration 
1. package.json 
2. gruntfile.js
Die package.json 
{ 
"name": "my-project-name", 
"version": "0.1.0", 
"devDependencies": { 
"grunt": "~0.4.5", 
"grunt-con...
Die gruntfile.js 
module.exports = function(grunt) { 
grunt.initConfig({ 
uglify: { 
options: { 
}, 
build: { 
src: 'src/i...
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 he...
Options in Tasks und Targets 
grunt.initConfig({ 
uglify: { 
options: { 
// Task-level options may go here, overriding tas...
Dateien laden & speichern 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
uglify: { 
src: ['src/bb.js', 's...
Nützliche Grunt Plugins 
Watch 
Tasty swig 
Node Sass 
load grunt config
Danke für Eure 
Aufmerksamkeit
Nächste SlideShare
Wird geladen in …5
×

Grunt

284 Aufrufe

Veröffentlicht am

Interne Präsentation zum Thema "Grunt"

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
284
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Grunt

  1. 1. Grunt Niklas Köhler
  2. 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. 3. Vorteile Entwicklungs- und Produktionscode sind getrennt Sehr leicht erweiter- und konfigurierbar Unzählige Module verfügbar
  4. 4. Nachteile Tasks werden in Reihe ausgeführt Die Gruntfile.js kann bis ins unermessliche wachsen Installation notwendig: Hotfixes werden dadurch erschwert
  5. 5. Installation 1. Node.js installieren 2. npm install -g grunt-cli ausführen (ggf. als root) 3. Fertig
  6. 6. Konfiguration 1. package.json 2. gruntfile.js
  7. 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. 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. 9. Tasks
  10. 10. Aufbau eines Tasks grunt.initConfig({ uglify: { // uglify task configuration goes here. } })
  11. 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. 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. 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. 14. Nützliche Grunt Plugins Watch Tasty swig Node Sass load grunt config
  15. 15. Danke für Eure Aufmerksamkeit

×