SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
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 durch Module erweiterbar
Vorteile 
Entwicklungs- und Produktionscode sind getrennt 
Sehr leicht erweiter- und konfigurierbar 
Unzählige Module verfügbar
Nachteile 
Tasks werden in Reihe ausgeführt 
Die Gruntfile.js kann bis ins unermessliche wachsen 
Installation notwendig: Hotfixes werden dadurch 
erschwert
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-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 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. 
} 
} 
})
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 Plugins 
Watch 
Tasty swig 
Node Sass 
load grunt config
Danke für Eure 
Aufmerksamkeit

Weitere ähnliche Inhalte

Was ist angesagt?

Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshopphillipgroschup
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeFrank Müller
 
Spaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitSpaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitFrank Müller
 
How to install Gitweb on Ubuntu
How to install Gitweb on UbuntuHow to install Gitweb on Ubuntu
How to install Gitweb on Ubuntuteena77
 
Bestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrierenBestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrierenWalter Ebert
 
mongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - GrundlagenmongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - Grundlageninovex GmbH
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3marco-huber
 
Object-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - WorkshopObject-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - WorkshopWaldemar Dell
 
9 WordPress Plugins für SEO, die reich und mächtig machen
9 WordPress Plugins für SEO, die reich und mächtig machen9 WordPress Plugins für SEO, die reich und mächtig machen
9 WordPress Plugins für SEO, die reich und mächtig machenAlexander Rus
 

Was ist angesagt? (14)

Wordpress Template Workshop
Wordpress Template WorkshopWordpress Template Workshop
Wordpress Template Workshop
 
Git im team
Git im teamGit im team
Git im team
 
Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
 
Spaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitSpaß an der Nebenläufigkeit
Spaß an der Nebenläufigkeit
 
How to install Gitweb on Ubuntu
How to install Gitweb on UbuntuHow to install Gitweb on Ubuntu
How to install Gitweb on Ubuntu
 
Einführung in Puppet
Einführung in PuppetEinführung in Puppet
Einführung in Puppet
 
CouchDB
CouchDBCouchDB
CouchDB
 
Bestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrierenBestehende WordPress-Seiten auf Multisite migrieren
Bestehende WordPress-Seiten auf Multisite migrieren
 
mongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - GrundlagenmongoDB im Einsatz - Grundlagen
mongoDB im Einsatz - Grundlagen
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
 
Effiziente Programme
Effiziente ProgrammeEffiziente Programme
Effiziente Programme
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
 
Object-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - WorkshopObject-orientied way of using mysqli interface - Workshop
Object-orientied way of using mysqli interface - Workshop
 
9 WordPress Plugins für SEO, die reich und mächtig machen
9 WordPress Plugins für SEO, die reich und mächtig machen9 WordPress Plugins für SEO, die reich und mächtig machen
9 WordPress Plugins für SEO, die reich und mächtig machen
 

Ähnlich wie Grunt

Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit antroskakori
 
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GIS
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GISGeoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GIS
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GISPeter Löwe
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...NETWAYS
 
OSDC 2011 | FAI - Fully Automatic Installation by Thomas Lange
OSDC 2011 | FAI - Fully Automatic Installation by Thomas LangeOSDC 2011 | FAI - Fully Automatic Installation by Thomas Lange
OSDC 2011 | FAI - Fully Automatic Installation by Thomas LangeNETWAYS
 
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...gedoplan
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauenjohofer
 
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas Lange
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas LangeOSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas Lange
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas LangeNETWAYS
 
Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17remigius-stalder
 
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...gedoplan
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsJosef Adersberger
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsQAware GmbH
 
Agorum core-installation-linux-6 4-0a
Agorum core-installation-linux-6 4-0aAgorum core-installation-linux-6 4-0a
Agorum core-installation-linux-6 4-0aagorum Software GmbH
 
SLAC 2008 RPMs selber bauen
SLAC 2008 RPMs selber bauenSLAC 2008 RPMs selber bauen
SLAC 2008 RPMs selber bauenSchlomo Schapiro
 
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...NETWAYS
 
Why websecurity sucks
Why websecurity sucksWhy websecurity sucks
Why websecurity sucksThaDafinser
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenHendrik Lösch
 

Ähnlich wie Grunt (20)

Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GIS
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GISGeoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GIS
Geoinformatik-Kolloquium Juni 2012: High Performance Computing Cluster GIS
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
 
OSDC 2011 | FAI - Fully Automatic Installation by Thomas Lange
OSDC 2011 | FAI - Fully Automatic Installation by Thomas LangeOSDC 2011 | FAI - Fully Automatic Installation by Thomas Lange
OSDC 2011 | FAI - Fully Automatic Installation by Thomas Lange
 
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
 
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas Lange
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas LangeOSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas Lange
OSDC 2010 | FAI - ein Projekt wird 10 Jahre alt by Thomas Lange
 
Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17
 
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
Das Runde muss in das Eckige - Java-Anwendungen für Kubernetes entwickeln und...
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
 
Agorum core-installation-linux-6 4-0a
Agorum core-installation-linux-6 4-0aAgorum core-installation-linux-6 4-0a
Agorum core-installation-linux-6 4-0a
 
SLAC 2008 RPMs selber bauen
SLAC 2008 RPMs selber bauenSLAC 2008 RPMs selber bauen
SLAC 2008 RPMs selber bauen
 
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...
Nagios Conference 2006 | NagiosOnCD – eine linux-basierte Live-CD mit Nagios ...
 
Why websecurity sucks
Why websecurity sucksWhy websecurity sucks
Why websecurity sucks
 
FLOW3-Workshop F3X12
FLOW3-Workshop F3X12FLOW3-Workshop F3X12
FLOW3-Workshop F3X12
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
Einführung in Docker
Einführung in DockerEinführung in Docker
Einführung in Docker
 

Grunt

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