Automatisierung mit Grunt

Transcript

1. AUTOMATISIERUNG MIT GRUNT AUTOMATISIERUNG MIT GRUNT Christian Herberger
2. ÜBER MICH ÜBER MICH Integrator PHP-Entwickler FE-Entwickler
3. PUNKT.DE PUNKT.DE TYPO3-Komplettpakete in Karlsruhe ~30 Mitarbeiter
4. DER ROTE FADEN DER 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. GRUNT GRUNT Das nützliche Warzenschwein
6. WAS IST GRUNT WAS 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. BENUTZUNG BENUTZUNG ... wird im Rahmen des Beispiels gezeigt
8. EINFACHER WORKFLOW EINFACHER 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 TOOLS INSTALLATION DER RELEVANTEN TOOLS
10. NPM NPM 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. COMPASS COMPASS (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 GLOBAL NPM-PAKETE GLOBAL (sudo) npm install -g grunt-cli Nur einmal auf dem Rechner notwendig
13. NPM-PAKETE IM PROJEKT NPM-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 PROJEKT LISTE 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 PROJEKT LISTE 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 VORBEREITUNGEN WEITERE VORBEREITUNGEN
17. ORDNER-/DATEISTRUKTUR ORDNER-/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.RB COMPASS: CONFIG.RB Eine valide config.rb kann sowohl für Compass selbst als auch für Grunt verwendet werden
19. JSQUEUE JSQUEUE 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.JS GRUNTFILE.JS Der Schlüssel des Erfolgs
21. TASKS LADEN TASKS 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-/DATEILISTE ORDNER-/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. CLEAN CLEAN clean: { options: { force: true }, workingDirectory:[ '<%= filePaths.workingDirectory %>' ], baseJavaScript: [ '<%= filePaths.baseJavaScript.dest %>' ], siteApp: [ '<%= filePaths.siteApp.dest %>' ] },
24. NGANNOTATE NGANNOTATE ngAnnotate: { options: { singleQuotes: true }, siteApp: { files: { '<%= filePaths.workingDirectory %>/annotated.js': [ } } },
25. UGLIFY UGLIFY uglify: { baseJavaScript: { files: { '<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePat } }, angularApp: { files: { '<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePat } } },
26. CONCAT CONCAT concat: { baseJavaScript: { files: { '<%= filePaths.workingDirectory %>/base.min.js': [ } }, angularApp: { files: { '<%= filePaths.workingDirectory %>/app.min.js': [ } }, angularAppDev: { files: { '<%= filePaths.workingDirectory %>/app.min.js': [ } } },
27. COPY COPY 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. COMPASS COMPASS compass: { stylesheets: { options: { config: 'config.rb' } } },
30. WATCH WATCH 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 GRUNT EIGENE TASKS IN GRUNT Tun und lassen, was man will (und braucht)
32. KOMBINIERTE TASKS MIT ABHÄNGIGKEIT KOMBINIERTE 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ÄNGIGKEIT KOMBINIERTE 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 PARAMETERN EIGENE 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 GRUNT AUSFÜHRUNG VON GRUNT Das wichtigste überhaupt!
36. AUSFÜHREN VON TASKS AUSFÜ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 TASKS AUSFÜHREN VON TASKS Ultimativ: Grunt-Konsole in phpStorm (vielleicht mit grunt- notify)
38. AUSBLICK AUSBLICK
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