Le document présente une introduction à GruntJS lors de Devoxx France 2016, abordant des concepts tels que la gestion des dépendances, les tests automatisés et la modularisation des projets front-end. Il discute également de l'intégration de Grunt avec Maven et illustre des étapes pratiques de configuration et d'exécution de build. Enfin, il souligne la nécessité d'un outil de build face à la complexité croissante du développement front-end.

1. Devoxx France 2016
GruntJs In Action
Sarah Buisson
1

2. Plan
2
●
Introduction
●
Grunt & Maven
●
Live Coding
– Plugin de base et hello World
– Bower: Gestions des dépendances
– Sass
– Jasmine & CasperJs : Tests automatisés du front
– Browserify :
●
Modularisation
●
Transpilation

3. Des nouvelles du
Front-End
3
Injection des dépendances
Effets de bords
Compatibilité
inter-navigateur
Css monolithique
Compatibilité inter-device
Versionning des dépendances
Régréssions

4. Des nouvelles du
Front-End
4
Injection des dépendances
Effets de bords
Compatibilité
inter-navigateur
Css monolithique
Compatibilité inter-device
Versionning des dépendances
Régréssions

5. Build & Front-End
5
Complexification du front-end.
→ Necéssité d'un outil de build
Avantages & Inconvénients de Grunt

6. Maven & Grunt
6

7. 7
Step 1 : <goal>create-resources</goal>
Initialise

8. 8
Step 2 : <goal>npm</goal>
Installe les
dépendances
du build

9. Step 3 : <goal>grunt</goal>
Task:MavenPrepare /src/ma
Task:[…] /target-grunt
Task:mavenDist /target-gru

10. Step 3 : <goal>grunt</goal>
Task:MavenPrepare /src/main/webapp/static /target-grunt
Task:[…] /target-grunt /target-grunt/dist
Task:mavenDist /target-grunt/dist /target/main/static

11. Live Coding
11
– Plugin de base et hello World
– Bower: Gestions des dépendances
– Sass
– Jasmine & CasperJs : Tests automatisés du front
– Browserify :
●
Modularisation
●
Transpilation

12. Merci de votre
attention
12
BackStopJS