Automatisierung mit grunt

AUTOMATISIERUNG MIT GRUNTAUTOMATISIERUNG MIT GRUNTChristian Herberger

ÜBER MICHÜBER MICHIntegratorPHP-EntwicklerFE-Entwickler

PUNKT.DEPUNKT.DETYPO3-Komplettpakete in Karlsruhe~30 Mitarbeiter

DER ROTE FADENDER ROTE FADENWas ist Grunt und was kann es?Workflow für eine Applikation innerhalb einer Website

Tasks installieren und konfigurierenTask-KombinationenEigene Tasks

Ausführung von GruntAusblick

GRUNTGRUNTDas nützliche Warzenschwein

WAS IST GRUNTWAS IST GRUNTThe JavaScript Task Runner

Automatisierung von wiederkehrenden AufgabenFertige Plugins für viele WerkzeugeTask-Abhängigkeiten/ReihenfolgenÜberwachung des Codes auf ÄnderungenEigene Tasks einfach möglich

BENUTZUNGBENUTZUNG... wird im Rahmen des Beispiels gezeigt

EINFACHER WORKFLOWEINFACHER WORKFLOW2 Extensions - Sitepackage mit SCSS und Standard-JavaScript & Extension mit Angular-AppZiel: Eine CSS-Datei, eine JS-Datei für die AppJavaScript im Footer, Inlinescript muss funktionieren

INSTALLATION DER RELEVANTEN TOOLSINSTALLATION DER RELEVANTEN TOOLS

NPMNPMMac: Per Brew, ports, ...Linux: apt, yum, ...BSD: pkg, ...Win: Node und NPM von der Website laden undinstallieren (läuft!)

Nur einmal auf dem Rechner notwendig

COMPASSCOMPASS (DER AUFWÄNDIGSTE TEIL) (DER AUFWÄNDIGSTE TEIL)Ruby installierenCompass mit gem installieren

Andere Compiler sind möglich, nachher aufpassenNur einmal auf dem Rechner notwendig

NPM-PAKETE GLOBALNPM-PAKETE GLOBAL(sudo) npm install -g grunt-cli

Nur einmal auf dem Rechner notwendig

NPM-PAKETE IM PROJEKTNPM-PAKETE IM PROJEKTcd /projektverzeichnis/htdocs/typo3conf/ext/pt_site_base && npm init

npm install [paketname]

Einmal pro Projekt notwendig

LISTE DER PAKETE IM PROJEKTLISTE DER PAKETE IM PROJEKTgrunt: Lokale Grunt-Instanz zum Ausführen der Tasksgrunt-contrib-clean: Verzeichnisse leerengrunt-contrib-compass: Compass aufrufengrunt-contrib-concat: Dateien zusammenführen, ohneden Inhalt zu veränderngrunt-contrib-copy: Dateien von A nach B kopierengrunt-contrib-uglify: JavaScript minifyengrunt-contrib-watch: Dateien überwachen und Tasksstartengrunt-ng-annotate: AngularJS-Minify-Hilfe

LISTE DER PAKETE IM PROJEKTLISTE DER PAKETE IM PROJEKTWandert alles nach package.json und node_modules/Nur die package.json muss ins VCSAndere Entwickler benötigen nur

npm install

WEITERE VORBEREITUNGENWEITERE VORBEREITUNGEN

ORDNER-/DATEISTRUKTURORDNER-/DATEISTRUKTURAlle Entwicklungsdateien in Resources/PrivateResources/Public nach .gitignoreAlles SASS (weil Projekt-abhängig und nicht für dieAnwendung) in der base-ExtensionJavaScript trennen nach Base, App und JSQueue (fürspäteres Ausführen von beliebigem JS)

COMPASS: CONFIG.RBCOMPASS: CONFIG.RBEine valide config.rb kann sowohl für Compass selbst als

auch für Grunt verwendet werden

JSQUEUEJSQUEUEKleines JavaScript im Header, welches Inline-JavaScriptzur verspäteten Ausführung queuen kannKleines JavaScript im Footer, welches die gequeuetenScripte ausführt und an jQuery weitergibt¡Anwendung: JavaScript, welches auf Libraries zugreift(jQuery!!!)

GRUNTFILE.JSGRUNTFILE.JSDer Schlüssel des Erfolgs

TASKS LADENTASKS LADENgrunt.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');

ORDNER-/DATEILISTEORDNER-/DATEILISTEListe nur einmal definieren und immer wieder verwendenAlle Pfade relativ zum Gruntfile, werden so geschriebendass von ext/ aus geprüft wirdReihenfolge wird beachtetDuplikate werden nur einmal (das erste mal) verwendet

CLEANCLEANclean: {

options: {force: true

},workingDirectory:[

'<%= filePaths.workingDirectory %>'],baseJavaScript: [

'<%= filePaths.baseJavaScript.dest %>'],siteApp: [

'<%= filePaths.siteApp.dest %>']

},

NGANNOTATENGANNOTATEngAnnotate: {

options: {singleQuotes: true

},siteApp: {

files: {'<%= filePaths.workingDirectory %>/annotated.js': [

}}

},

UGLIFYUGLIFYuglify: {

baseJavaScript: {files: {

'<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePaths.bas}

},angularApp: {

files: {'<%= filePaths.workingDirectory %>/uglify.js': ['<%= filePaths.wor

}}

},

CONCATCONCATconcat: {

baseJavaScript: {files: {

'<%= filePaths.workingDirectory %>/base.min.js': [}

},angularApp: {

files: {'<%= filePaths.workingDirectory %>/app.min.js': [

}},angularAppDev: {

files: {'<%= filePaths.workingDirectory %>/app.min.js': [

}}

},

COPYCOPYcopy: {

baseJavaScript: {files: [

{expand: true,cwd: '<%= filePaths.workingDirectory %>',src: ['base.min.js'],dest: '<%= filePaths.baseJavaScript.dest %>'

},{

expand: true,cwd: '../../../pt_site_base/Resources/Private/JavaScript/Jsrc: ['OnReadyInit.js', 'OnReadyRun.js'],dest: '<%= filePaths.baseJavaScript.dest %>'

}]

},siteApp: {

files: [{

expand: true,cwd: '<%= filePaths.workingDirectory %>',src: ['app.min.js'],dest: '<%= filePaths.siteApp.dest %>'

}]

},

COMPASSCOMPASScompass: {

stylesheets: {options: {

config: 'config.rb'}

}},

WATCHWATCHwatch: {

baseJavaScript: {files: ['<%= filePaths.baseJavaScript.src %>'],tasks: 'baseJavaScript'

},styleheets: {

files: ['<%= filePaths.stylesheets.src %>'],tasks: 'compass'

},siteApp: {

files: ['<%= filePaths.siteApp.src %>'],tasks: 'siteAppDev'

}}

EIGENE TASKS IN GRUNTEIGENE TASKS IN GRUNTTun und lassen, was man will (und braucht)

KOMBINIERTE TASKS MIT ABHÄNGIGKEITKOMBINIERTE TASKS MIT ABHÄNGIGKEITgrunt.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');

});

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

EIGENE TASKS MIT PARAMETERNEIGENE TASKS MIT PARAMETERNgrunt.registerTask('helloWorld','',function(name){

grunt.log.write('running hello world with argument: ' + name + '\n'

grunt.file.write('./helloWorld.json', 'alert("Hello ' + name + '");'});

AUSFÜHRUNG VON GRUNTAUSFÜHRUNG VON GRUNTDas wichtigste überhaupt!

AUSFÜHREN VON TASKSAUSFÜHREN VON TASKSgrunt -> Default-Taskgrunt dev -> Dev-Taskgrunt siteApp -> SiteApp-Taskgrunt helloWorld:name -> HelloWorld mit Name

Geht auch alles mit -v (verbose)

AUSFÜHREN VON TASKSAUSFÜHREN VON TASKSUltimativ: Grunt-Konsole in phpStorm (vielleicht mit grunt-

notify)

AUSBLICKAUSBLICK

Fragen? Antworten! Diskussion?

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