Grunt

294 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
294
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

×