BreizhCamp 2015

#BzhCmpBreizhCamp 2015

#BzhCmp

Matthieu Bréchet - @mbrechetLoïc Truchot - @n_a_n35

builder, tester, livrer… sans tomber dans les

1

Présentation des conférenciers

Matthieu BréchetArchitecte Web@mbrechet

Loïc TruchotLead Dev Web

@n_a_n35

2

Introduction au sujet

● Pourquoi un environnement de build ?o un moteur de production: automatiser les

tâches répétitives de construction de l’application

o pratique dans tous les cas, indispensable en Agilité

● Lequel choisir ?o Plusieurs environnements très populaires:

Make, Ant, Maven, Gradle, Grunt…o Pas de compétition: le choix se fait selon les

besoins 3

Notre application et notre besoin

● Une application full stack JavaScripto Notre App: la “tarantino-thèque” (mini-

vidéothèque)o Contraintes spécifiques :

linter, combiner, minifier les fichiers JS, HTML, CSS, fonts, etc.

compiler le sass, compresser les images/sprites déploiement continue sur IC et livraisons régulières

4

Notre choix : Gulp

● Le choix de Gulp

o Maven sur notre projet VODo Grunt VS Gulp : pas de gagnant

Gulp - le moteur de production “Node friendly” envie d’explorer les nouveautés sans oublier nos

contraintes envie de coder plutôt que configurer

5

MAVEN ?

6

Un build sous Maven

● Pour faire quoi ?○ vérifier ○ builder ○ tester ○ packager○ déployer…

7

● Faisable oui, mais avec des contraintes○ performance○ maintenabilité○ environnement

Un build sous Maven

8

Gulp ?

9

Installer Gulp pour builder

● Comment installer Gulp ?o NodeJS et NPM : https://nodejs.org/o Installation globale

● gestion des pluginso le fichier package.jsono installation et sauvegarde

> npm install -g gulp

> npm init

> npm install --save gulp

10

Gulp fonctionnement simple

● 1 fichier de description : le gulpfile

● 3 méthodes principales o task, src et dest

● une grande quantité de plugins disponibleso environ 1500 o mais aussi les plugins

NPM

http://gulpjs.com/plugins/

11

Gulp les bonnes pratiques

● 1 fichier par action

● Un répertoire spécifique pour le build ● le plugin run-sequence 12

Lancer un build gulp !

● Une commande :

● Pour une tache précise :

> gulp

> gulp <task>

13

Aller plus loin avec Gulp 1/2

● En quoi Gulp est-il “node friendly” ?

o globs & vinylso streams & pipeo plugin-gulp et NPMo asynchronicité,

parallèlisme

14

Aller plus loin avec Gulp 2/2

● Le watcho compilation de html : la tâche watch-webfiles

o et pour les scss ?15

Conclusion

● La promesse est tenue !

● Gulp aujourd’hui o innombrables utilisateurso activité encore quotidienne sur le repo githubo faiblesses actuelles : erreurs, sourcemaps,

site et docs - objectifs de la 4.0 !

● Questions ?

16

Annexe

● notre biblioo http://gulpjs.como http://nodejs.orgo http://gulpfiction.divshot.io/o https://medium.com/@contrahacks/gulp-3828

e8126466

● accéder à nos sourceso demo : http://github.com/mbrechet/gulpfictiono présentation : https://goo.gl/VUj5Oy

17