Automatisez votre build web avec Grunt

Vous utilisez probablement déjà un outil de build pour construire votre application serveur. Votre front-end web ne mérite-t-il pas lui aussi une automatisation de son processus de construction ?

La solution open-source Grunt répond à cette problématique. De la minification de Javascript au préprocessing CSS, en passant par l'analyse statique de code et l'exécution des tests, ce talk présente les possibilités offertes par cet outil et la richesse de son écosystème.

Démos :
- https://github.com/antoine-richard/introductory-examples-to-grunt/tree/master/demo-1
- https://github.com/antoine-richard/introductory-examples-to-grunt/tree/master/demo-2
- https://github.com/antoine-richard/angular-movie-workshop/tree/step-9

Transcript

1. AUTOMATISEZ VOTRE BUILD WEB AVEC GRUNT
2. WHOAMI 2 ANTOINE RICHARD ARCHITECTE WEB
3. QUE RETOURNE CETTE FONCTION ? +PREMIER NIVEAU •Corps de texte DEUXIÈME NIVEAU •Corps de texte 3 function f() { var value = 2; return { a: value, b: 42, c: "Obi Wan Kenobi" }; }
4. AUTOMATIC SEMICOLON INSERTION ! +PREMIER NIVEAU •Corps de texte DEUXIÈME NIVEAU •Corps de texte 4 function f() { var value = 2; return; { a: value, b: 42, c: "Obi Wan Kenobi" }; } Code non-accessible
5. WEB PERF BEST PRACTICE 5
6. INTÉRÊTS DU BUILD WEB 6
7. COMPILATION + COFFEESCRIPT + LESS, SASS… + TEMPLATES HTML 7
8. PERFORMANCE + CONCATÉNATION + MINIFICATION + SPRITING •Sans oublier la mise à jour des références 8
9. QUALITÉ + ANALYSE STATIQUE + EXÉCUTION DES TESTS 9
10. HERE COMES… 10 GRUNT THE JAVASCRIPT TASK RUNNER SPONSORED BY
11. WHO USES GRUNT ? 11 ...
12. DEMO TIME 12 JSHint : goo.gl/qbz6m LESS + Watch : goo.gl/t2tRJ Build complet : goo.gl/hBX5u
13. GRUNTJS.COM / PLUGINS 13 KARMA QUNIT COPY CLEAN WATCH LIVERELOAD COFFEE COMPASS COMPRESS SSH CONNECT CONCAT OVERSPRITE CSSLINT CSSMIN HANDLEBARS JADE JASMINE JSHINT JST LESS NODEUNIT REQUIREJS SASS UGLIFY HTML2JS USEMIN
14. @richard_antoine