Grunt-Installation und Konfiguration

1. AUTOMATISIERUNG MIT GRUNTAUTOMATISIERUNG MIT GRUNT
Christian Herberger

2. ÜBER MICHÜBER MICH
Integrator
PHP-Entwickler
FE-Entwickler

3. PUNKT.DEPUNKT.DE
TYPO3-Komplettpakete in Karlsruhe
~30 Mitarbeiter

4. DER ROTE FADENDER ROTE FADEN
Was ist Grunt und was kann es?
Workflow für eine Applikation innerhalb einer Website
Tasks installieren und konfigurieren
Task-Kombinationen
Eigene Tasks
Ausführung von Grunt
Ausblick

5. GRUNTGRUNT
Das nützliche Warzenschwein

6. WAS IST GRUNTWAS IST GRUNT
The JavaScript Task Runner
Automatisierung von wiederkehrenden Aufgaben
Fertige Plugins für viele Werkzeuge
Task-Abhängigkeiten/Reihenfolgen
Überwachung des Codes auf Änderungen
Eigene Tasks einfach möglich

7. BENUTZUNGBENUTZUNG
... wird im Rahmen des Beispiels gezeigt

8. EINFACHER WORKFLOWEINFACHER WORKFLOW
2 Extensions - Sitepackage mit SCSS und Standard-
JavaScript & Extension mit Angular-App
Ziel: Eine CSS-Datei, eine JS-Datei für die App
JavaScript im Footer, Inlinescript muss funktionieren

9. INSTALLATION DER RELEVANTEN TOOLSINSTALLATION DER RELEVANTEN TOOLS

10. NPMNPM
Mac: Per Brew, ports, ...
Linux: apt, yum, ...
BSD: pkg, ...
Win: Node und NPM von der Website laden und
installieren (läuft!)
Nur einmal auf dem Rechner notwendig

11. COMPASSCOMPASS (DER AUFWÄNDIGSTE TEIL)(DER AUFWÄNDIGSTE TEIL)
Ruby installieren
Compass mit gem installieren
Andere Compiler sind möglich, nachher aufpassen
Nur einmal auf dem Rechner notwendig

12. NPM-PAKETE GLOBALNPM-PAKETE GLOBAL
(sudo) npm install -g grunt-cli
Nur einmal auf dem Rechner notwendig

13. NPM-PAKETE IM PROJEKTNPM-PAKETE IM PROJEKT
cd /projektverzeichnis/htdocs/typo3conf/ext/pt_site_base && npm init
npm install [paketname]
Einmal pro Projekt notwendig

14. LISTE DER PAKETE IM PROJEKTLISTE DER PAKETE IM PROJEKT
grunt: Lokale Grunt-Instanz zum Ausführen der Tasks
grunt-contrib-clean: Verzeichnisse leeren
grunt-contrib-compass: Compass aufrufen
grunt-contrib-concat: Dateien zusammenführen, ohne
den Inhalt zu verändern
grunt-contrib-copy: Dateien von A nach B kopieren
grunt-contrib-uglify: JavaScript minifyen
grunt-contrib-watch: Dateien überwachen und Tasks
starten
grunt-ng-annotate: AngularJS-Minify-Hilfe

15. LISTE DER PAKETE IM PROJEKTLISTE DER PAKETE IM PROJEKT
Wandert alles nach package.json und node_modules/
Nur die package.json muss ins VCS
Andere Entwickler benötigen nur
npm install

16. WEITERE VORBEREITUNGENWEITERE VORBEREITUNGEN

17. ORDNER-/DATEISTRUKTURORDNER-/DATEISTRUKTUR
Alle Entwicklungsdateien in Resources/Private
Resources/Public nach .gitignore
Alles SASS (weil Projekt-abhängig und nicht für die
Anwendung) in der base-Extension
JavaScript trennen nach Base, App und JSQueue (für
späteres Ausführen von beliebigem JS)

18. COMPASS: CONFIG.RBCOMPASS: CONFIG.RB
Eine valide config.rb kann sowohl für Compass selbst als
auch für Grunt verwendet werden

19. JSQUEUEJSQUEUE
Kleines JavaScript im Header, welches Inline-JavaScript
zur verspäteten Ausführung queuen kann
Kleines JavaScript im Footer, welches die gequeueten
Scripte ausführt und an jQuery weitergibt¡
Anwendung: JavaScript, welches auf Libraries zugreift
(jQuery!!!)

20. GRUNTFILE.JSGRUNTFILE.JS
Der Schlüssel des Erfolgs

21. TASKS LADENTASKS LADEN
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-ng-annotate');

22. ORDNER-/DATEILISTEORDNER-/DATEILISTE
Liste nur einmal definieren und immer wieder verwenden
Alle Pfade relativ zum Gruntfile, werden so geschrieben
dass von ext/ aus geprüft wird
Reihenfolge wird beachtet
Duplikate werden nur einmal (das erste mal) verwendet

23. CLEANCLEAN
clean: {
options: {
force: true
},
workingDirectory:[
'<%= filePaths.workingDirectory %>'
],
baseJavaScript: [
'<%= filePaths.baseJavaScript.dest %>'
],
siteApp: [
'<%= filePaths.siteApp.dest %>'
]
},

24. NGANNOTATENGANNOTATE
ngAnnotate: {
options: {
singleQuotes: true
},
siteApp: {
files: {
'<%= filePaths.workingDirectory %>/annotated.js': [
}
}
},

25. UGLIFYUGLIFY
uglify: {
baseJavaScript: {
files: {
'<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePat
}
},
angularApp: {
files: {
'<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePat
}
}
},

26. CONCATCONCAT
concat: {
baseJavaScript: {
files: {
'<%= filePaths.workingDirectory %>/base.min.js': [
}
},
angularApp: {
files: {
'<%= filePaths.workingDirectory %>/app.min.js': [
}
},
angularAppDev: {
files: {
'<%= filePaths.workingDirectory %>/app.min.js': [
}
}
},

27. COPYCOPY
copy: {
baseJavaScript: {
files: [
{
expand: true,
cwd: '<%= filePaths.workingDirectory %>',
src: ['base.min.js'],
dest: '<%= filePaths.baseJavaScript.dest %>'
},
{
expand: true,
cwd: '../../../pt_site_base/Resources/Private/JavaSc
src: ['OnReadyInit.js', 'OnReadyRun.js'],
dest: '<%= filePaths.baseJavaScript.dest %>'
}
]
},
siteApp: {
files: [
{
expand: true,
cwd: '<%= filePaths.workingDirectory %>',
src: ['app.min.js'],
dest: '<%= filePaths.siteApp.dest %>'
}
]

28. },

29. COMPASSCOMPASS
compass: {
stylesheets: {
options: {
config: 'config.rb'
}
}
},

30. WATCHWATCH
watch: {
baseJavaScript: {
files: ['<%= filePaths.baseJavaScript.src %>'],
tasks: 'baseJavaScript'
},
styleheets: {
files: ['<%= filePaths.stylesheets.src %>'],
tasks: 'compass'
},
siteApp: {
files: ['<%= filePaths.siteApp.src %>'],
tasks: 'siteAppDev'
}
}

31. EIGENE TASKS IN GRUNTEIGENE TASKS IN GRUNT
Tun und lassen, was man will (und braucht)

32. KOMBINIERTE TASKS MIT ABHÄNGIGKEITKOMBINIERTE TASKS MIT ABHÄNGIGKEIT
grunt.registerTask('baseJavaScript', ['clean:baseJavaScript','clean:workingDirectory
grunt.registerTask('siteApp', 'build production ready app', function(parameter){
grunt.task.run('clean:siteApp');
grunt.task.run('clean:workingDirectory');
grunt.task.run('ngAnnotate:siteApp:' + parameter);
grunt.task.run('uglify:angularApp');
grunt.task.run('concat:angularApp');
grunt.task.run('copy:siteApp');
grunt.task.run('clean:workingDirectory');
});

33. KOMBINIERTE TASKS MIT ABHÄNGIGKEITKOMBINIERTE TASKS MIT ABHÄNGIGKEIT
(REKURSIV!)(REKURSIV!)
// Default task.
grunt.registerTask('default', 'build everything production ready', function
grunt.task.run('baseJavaScript');
grunt.task.run('siteApp');
});
grunt.registerTask('dev', 'build everything for development', function(){
grunt.task.run('baseJavaScript');
grunt.task.run('siteAppDev');
});
grunt.registerTask('w', ['dev', 'watch']);

34. EIGENE TASKS MIT PARAMETERNEIGENE TASKS MIT PARAMETERN
grunt.registerTask('helloWorld','',function(name){
grunt.log.write('running hello world with argument: ' + name + 'n'
grunt.file.write('./helloWorld.json', 'alert("Hello ' + name + '");'
});

35. AUSFÜHRUNG VON GRUNTAUSFÜHRUNG VON GRUNT
Das wichtigste überhaupt!

36. AUSFÜHREN VON TASKSAUSFÜHREN VON TASKS
grunt -> Default-Task
grunt dev -> Dev-Task
grunt siteApp -> SiteApp-Task
grunt helloWorld:name -> HelloWorld mit Name
Geht auch alles mit -v (verbose)

37. AUSFÜHREN VON TASKSAUSFÜHREN VON TASKS
Ultimativ: Grunt-Konsole in phpStorm (vielleicht mit grunt-
notify)

38. AUSBLICKAUSBLICK

39. Fragen? Antworten! Diskussion?

40. Vielen Dank für die Aufmerksamkeit!
https://github.com/kabarakh/t3cs15/
http://de.slideshare.net/Kabarakh1/automatisierung-
mit-grunt
https://speakerdeck.com/kabarakh/automatisierung-
mit-grunt