Automatisierung mit grunt
-
Upload
christian-herberger -
Category
Internet
-
view
143 -
download
0
Transcript of 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