Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automatisez votre build web avec Grunt

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

0d67d4ac82fb031ff815245ae00e1a97?s=128

Antoine RICHARD

June 13, 2013
Tweet

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