Grunt, Before & After

- https://github.com/cowboy
- https://github.com/gruntjs/grunt/blob/master/Gruntfile.js
- http://gruntjs.com/
- https://github.com/gruntjs

Transcript

1. GRUNT.JS
   AVANT / APRÈS
   1
   

   View Slide

2. AUJOURD'HUI COMMENT
   TRAVAILLE UN DEV FRONT-END ?
   HTML
   CSS
   JS
   Media (images principalement)
   2
   

   View Slide

3. ... AVEC DIFFÉRENTS OUTILS...
   pré-processeur CSS
   optimiseurs d'images
   générateurs de fonts
   pré-processeur JS
   linters
   livereload
   tests
   docs
   ...
   3
   

   View Slide

4. ... ET DIFFÉRENTES COMMANDES
   sass/compass, stylus, less
   jpegtran, optipng...
   fontforge
   coffeescript
   ...
   4
   

   View Slide

5. GRUNT.JS
   Grunt is a task-based command line build tool
   for JavaScript projects
   5
   

   View Slide

6. LE NOM GRUNT PROVIENT DE WARCRAFT
   3
   Confirmé par , créateur de Grunt.js
   ben_alman
   6
   

   View Slide

7. APRÈS GRUNT ?
   1. Préprocessing ? Grunt
   2. Tests ? Grunt
   3. csslint ? js(h|l)int ? Grunt
   4. ...
   7
   

   View Slide

8. INSTALLATION
   (OS X/HOMEBREW)
   Ca ne doit pas être bien difficile de trouver pour Linux, peut être un peu plus pour Windows
   $ brew install node
   $ curl http://npmjs.org/install.sh | sh
   $ npm install ­g grunt­cli
   $ npm install grunt ­­save­dev
   $ npm install {what­you­want}
   8
   

   View Slide

9. GRUNTFILE.JS
   CONFIG À LA MAKEFILE
   Gruntfile.js de Grunt.js Oui Grunt s'utilise lui même !
   Exemple de gruntfile pour un blog jekyll par_kud
   9
   

   View Slide

10. RUN ?
    $ grunt {task}
    10
    

    View Slide

11. STELLAR LINKS
    Grunt.js
    Grunt.js sur Github
    11
    

    View Slide

12. & /
    MAXIME THIROUIN /
    ENJOY !
    BY @MOOX ON TWITTER GITHUB
    MOOX.IO
    12
    

    View Slide