#DevoxxFR

Devoxx France 2016GruntJs In Action

Sarah Buisson

1

#DevoxxFR

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

#DevoxxFR

Des nouvelles duFront-End

3

Injection des dépendances

Effets de bordsCompatibilité inter-navigateur

Css monolithique

Compatibilité inter-device

Versionning des dépendances

Régréssions

#DevoxxFR

Des nouvelles duFront-End

4

Injection des dépendances

Effets de bordsCompatibilité inter-navigateur

Css monolithique

Compatibilité inter-device

Versionning des dépendances

Régréssions

#DevoxxFR

Build & Front-End

5

Complexification du front-end.→ Necéssité d'un outil de build

Avantages & Inconvénients de Grunt

#DevoxxFR

Maven & Grunt

6

#DevoxxFR

7

Step 1 : <goal>create-resources</goal>

Initialise

#DevoxxFR

8

Step 2 : <goal>npm</goal>

Installe lesdépendancesdu build

#DevoxxFR

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

#DevoxxFR

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

#DevoxxFR

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

#DevoxxFR

Merci de votreattention

12

BackStopJS