SlideShare une entreprise Scribd logo
BreizhCamp 2015 #BzhCmpBreizhCamp 2015 #BzhCmp
Matthieu Bréchet - @mbrechet
Loïc Truchot - @n_a_n35
builder, tester, livrer… sans tomber dans les
1
Présentation des conférenciers
Matthieu Bréchet
Architecte Web
@mbrechet
Loïc Truchot
Lead 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 JavaScript
o 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 VOD
o 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 plugins
o le fichier package.json
o 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 disponibles
o 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 & vinyls
o streams & pipe
o plugin-gulp et NPM
o asynchronicité,
parallèlisme
14
Aller plus loin avec Gulp 2/2
● Le watch
o compilation de html : la tâche watch-webfiles
o et pour les scss ?
15
Conclusion
● La promesse est tenue !
● Gulp aujourd’hui
o innombrables utilisateurs
o activité encore quotidienne sur le repo github
o faiblesses actuelles : erreurs, sourcemaps, site et
docs - objectifs de la 4.0 !
● Questions ?
16
Annexe
● notre biblio
o http://gulpjs.com
o http://nodejs.org
o http://gulpfiction.divshot.io/
o https://medium.com/@contrahacks/gulp-
3828e8126466
● accéder à nos sources
o demo : http://github.com/mbrechet/gulpfiction
o présentation : https://goo.gl/VUj5Oy
17

Contenu connexe

Tendances

Gitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement ContinueGitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement Continue
Vincent Composieux
 
Mixit2014_Puppet_Workshop
Mixit2014_Puppet_WorkshopMixit2014_Puppet_Workshop
Mixit2014_Puppet_Workshop
SMougenot
 
Migration d'une base de code subversion vers git
Migration d'une base de code subversion vers gitMigration d'une base de code subversion vers git
Migration d'une base de code subversion vers git
Geoffrey Bachelet
 
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntuDéveloppement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
Ahmed Archive
 
Introduction à SBT
Introduction à SBTIntroduction à SBT
Introduction à SBT
Jean Detoeuf
 
Tutorial Git
Tutorial GitTutorial Git
Présentation devops&puppet 04112014
Présentation devops&puppet 04112014 Présentation devops&puppet 04112014
Présentation devops&puppet 04112014
Roberto Barros De Sousa
 
Devoxx France : GruntJs In Action
Devoxx France : GruntJs In ActionDevoxx France : GruntJs In Action
Devoxx France : GruntJs In Action
Publicis Sapient Engineering
 
Versioning avec Git
Versioning avec GitVersioning avec Git
Versioning avec Git
Jean-Baptiste Vigneron
 
Les bases de git
Les bases de gitLes bases de git
Les bases de git
Pierre Sudron
 
Julien Maitrehenry - Docker, ça mange quoi au printemps
Julien Maitrehenry - Docker, ça mange quoi au printempsJulien Maitrehenry - Docker, ça mange quoi au printemps
Julien Maitrehenry - Docker, ça mange quoi au printemps
Web à Québec
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
13p
 
Docker@linuq
Docker@linuqDocker@linuq
Docker@linuq
Sylvain Boily
 
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Cédric Leblond
 
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentraliséDécouvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
ECAM Brussels Engineering School
 
Git développez autrement
Git développez autrementGit développez autrement
Git développez autrement
Bertrand Chevrier
 
Git pour les (pas si) nuls
Git pour les (pas si) nulsGit pour les (pas si) nuls
Git pour les (pas si) nuls
Malk Zameth
 
Git utilisation quotidienne
Git   utilisation quotidienneGit   utilisation quotidienne
Git utilisation quotidienne
Sylvain Witmeyer
 
Créer un projet Pig Unit avec intellij
Créer un projet Pig Unit avec intellijCréer un projet Pig Unit avec intellij
Créer un projet Pig Unit avec intellij
benjoyenconseil
 
Formation autour de git et git lab
Formation autour de git et git labFormation autour de git et git lab
Formation autour de git et git lab
Abdelghani Azri
 

Tendances (20)

Gitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement ContinueGitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement Continue
 
Mixit2014_Puppet_Workshop
Mixit2014_Puppet_WorkshopMixit2014_Puppet_Workshop
Mixit2014_Puppet_Workshop
 
Migration d'une base de code subversion vers git
Migration d'une base de code subversion vers gitMigration d'une base de code subversion vers git
Migration d'une base de code subversion vers git
 
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntuDéveloppement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
Développement avec Intégration continue:Git, Jenkins, Tomcat, CentOS, ubuntu
 
Introduction à SBT
Introduction à SBTIntroduction à SBT
Introduction à SBT
 
Tutorial Git
Tutorial GitTutorial Git
Tutorial Git
 
Présentation devops&puppet 04112014
Présentation devops&puppet 04112014 Présentation devops&puppet 04112014
Présentation devops&puppet 04112014
 
Devoxx France : GruntJs In Action
Devoxx France : GruntJs In ActionDevoxx France : GruntJs In Action
Devoxx France : GruntJs In Action
 
Versioning avec Git
Versioning avec GitVersioning avec Git
Versioning avec Git
 
Les bases de git
Les bases de gitLes bases de git
Les bases de git
 
Julien Maitrehenry - Docker, ça mange quoi au printemps
Julien Maitrehenry - Docker, ça mange quoi au printempsJulien Maitrehenry - Docker, ça mange quoi au printemps
Julien Maitrehenry - Docker, ça mange quoi au printemps
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Docker@linuq
Docker@linuqDocker@linuq
Docker@linuq
 
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
Retour d'expérience Docker: Puissance et simplicité de VSTS, déploiement sur ...
 
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentraliséDécouvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
 
Git développez autrement
Git développez autrementGit développez autrement
Git développez autrement
 
Git pour les (pas si) nuls
Git pour les (pas si) nulsGit pour les (pas si) nuls
Git pour les (pas si) nuls
 
Git utilisation quotidienne
Git   utilisation quotidienneGit   utilisation quotidienne
Git utilisation quotidienne
 
Créer un projet Pig Unit avec intellij
Créer un projet Pig Unit avec intellijCréer un projet Pig Unit avec intellij
Créer un projet Pig Unit avec intellij
 
Formation autour de git et git lab
Formation autour de git et git labFormation autour de git et git lab
Formation autour de git et git lab
 

En vedette

Workshop ssh (OSSEC)
Workshop ssh (OSSEC)Workshop ssh (OSSEC)
Workshop ssh (OSSEC)
Akram Rekik
 
SSH - Secure Shell
SSH - Secure ShellSSH - Secure Shell
SSH - Secure Shell
Souhaib El
 
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
Hiro H.
 
initiation SSH_SecuriNets ISI Tunisie
initiation SSH_SecuriNets ISI Tunisieinitiation SSH_SecuriNets ISI Tunisie
initiation SSH_SecuriNets ISI Tunisie
Donia Hammami
 
Zsh Rmll
Zsh RmllZsh Rmll
Zsh Rmll
Bruno Bonfils
 
Atelier ssh
Atelier sshAtelier ssh
Atelier ssh
Akram Rekik
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
Luc Juggery
 
ssh, bien plus qu'un telnet sécurisé
ssh, bien plus qu'un telnet sécuriséssh, bien plus qu'un telnet sécurisé
ssh, bien plus qu'un telnet sécurisé
Tryphon
 
Le web en temps réel - Socket.io - NodeJs
Le web en temps réel - Socket.io - NodeJsLe web en temps réel - Socket.io - NodeJs
Le web en temps réel - Socket.io - NodeJs
Thomas Ferney
 
SSH : Secure Shell
SSH : Secure ShellSSH : Secure Shell
SSH : Secure Shell
Ali Ben Messaoud
 
sshGate - RMLL 2011
sshGate - RMLL 2011sshGate - RMLL 2011
sshGate - RMLL 2011
Tauop
 
Comment améliorer la performance de vos sites et applications web présen...
Comment améliorer la performance de vos sites et applications web    présen...Comment améliorer la performance de vos sites et applications web    présen...
Comment améliorer la performance de vos sites et applications web présen...
Roland Coma
 
sshGate
sshGatesshGate
sshGate
LINAGORA
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
Ouadie LAHDIOUI
 
DDD – Domain Driven Design
DDD – Domain Driven DesignDDD – Domain Driven Design
DDD – Domain Driven Design
Jonatas Saraiva
 
Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript
felixbillon
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
jollivetc
 
Shell sans les coquilles
Shell sans les coquillesShell sans les coquilles
Shell sans les coquilles
Édouard Lopez
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
Romain Linsolas
 
workshop initiation ssh
workshop initiation sshworkshop initiation ssh
workshop initiation ssh
Zakaria SMAHI
 

En vedette (20)

Workshop ssh (OSSEC)
Workshop ssh (OSSEC)Workshop ssh (OSSEC)
Workshop ssh (OSSEC)
 
SSH - Secure Shell
SSH - Secure ShellSSH - Secure Shell
SSH - Secure Shell
 
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
CLR/H 第56回勉強会 LT「Ruby向けmultisetライブラリのご紹介」
 
initiation SSH_SecuriNets ISI Tunisie
initiation SSH_SecuriNets ISI Tunisieinitiation SSH_SecuriNets ISI Tunisie
initiation SSH_SecuriNets ISI Tunisie
 
Zsh Rmll
Zsh RmllZsh Rmll
Zsh Rmll
 
Atelier ssh
Atelier sshAtelier ssh
Atelier ssh
 
Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3Autour de Node.js - TechConf#3
Autour de Node.js - TechConf#3
 
ssh, bien plus qu'un telnet sécurisé
ssh, bien plus qu'un telnet sécuriséssh, bien plus qu'un telnet sécurisé
ssh, bien plus qu'un telnet sécurisé
 
Le web en temps réel - Socket.io - NodeJs
Le web en temps réel - Socket.io - NodeJsLe web en temps réel - Socket.io - NodeJs
Le web en temps réel - Socket.io - NodeJs
 
SSH : Secure Shell
SSH : Secure ShellSSH : Secure Shell
SSH : Secure Shell
 
sshGate - RMLL 2011
sshGate - RMLL 2011sshGate - RMLL 2011
sshGate - RMLL 2011
 
Comment améliorer la performance de vos sites et applications web présen...
Comment améliorer la performance de vos sites et applications web    présen...Comment améliorer la performance de vos sites et applications web    présen...
Comment améliorer la performance de vos sites et applications web présen...
 
sshGate
sshGatesshGate
sshGate
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
DDD – Domain Driven Design
DDD – Domain Driven DesignDDD – Domain Driven Design
DDD – Domain Driven Design
 
Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
 
Shell sans les coquilles
Shell sans les coquillesShell sans les coquilles
Shell sans les coquilles
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 
workshop initiation ssh
workshop initiation sshworkshop initiation ssh
workshop initiation ssh
 

Similaire à Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcamp 2015

Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
XavierPestel
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Horacio Gonzalez
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.fr
liberation_dev
 
REX - Passage de CVS à Git
REX - Passage de CVS à GitREX - Passage de CVS à Git
REX - Passage de CVS à Git
Pierre Templier
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon
 
Ionic
IonicIonic
Forum PHP 2014 day 1
Forum PHP 2014 day 1Forum PHP 2014 day 1
Forum PHP 2014 day 1
Olivier (DaffyDuke) Duquesne
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
TelecomValley
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
Jean-Pierre Vincent
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
Stéphane Traumat
 
Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)
Jean Gabès
 
l'Industrialisation (avec PHP) @MMIConnect
l'Industrialisation (avec PHP) @MMIConnectl'Industrialisation (avec PHP) @MMIConnect
l'Industrialisation (avec PHP) @MMIConnect
Florent DENIS
 
Introduction à PHP - Forum PHP 2010 - AFUP
Introduction à PHP - Forum PHP 2010 - AFUPIntroduction à PHP - Forum PHP 2010 - AFUP
Introduction à PHP - Forum PHP 2010 - AFUP
Nicolas Silberman
 
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
Sébastien Prunier
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
Ippon
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
boulonvert
 
Présentation du versioning avec Git
Présentation du versioning avec GitPrésentation du versioning avec Git
Présentation du versioning avec Git
msadouni
 
NightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery AvancéNightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery Avancé
Zenika
 

Similaire à Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcamp 2015 (20)

Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.fr
 
REX - Passage de CVS à Git
REX - Passage de CVS à GitREX - Passage de CVS à Git
REX - Passage de CVS à Git
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
Ionic
IonicIonic
Ionic
 
Forum PHP 2014 day 1
Forum PHP 2014 day 1Forum PHP 2014 day 1
Forum PHP 2014 day 1
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)
 
l'Industrialisation (avec PHP) @MMIConnect
l'Industrialisation (avec PHP) @MMIConnectl'Industrialisation (avec PHP) @MMIConnect
l'Industrialisation (avec PHP) @MMIConnect
 
Introduction à PHP - Forum PHP 2010 - AFUP
Introduction à PHP - Forum PHP 2010 - AFUPIntroduction à PHP - Forum PHP 2010 - AFUP
Introduction à PHP - Forum PHP 2010 - AFUP
 
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
Poitou Charentes JUG - Traçabilité dans une architecture distribuée avec Node...
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Présentation du versioning avec Git
Présentation du versioning avec GitPrésentation du versioning avec Git
Présentation du versioning avec Git
 
NightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery AvancéNightClazz Build Tools & Continuous Delivery Avancé
NightClazz Build Tools & Continuous Delivery Avancé
 

Gulp fiction, Builder, tester, livrer, sans tomber dans les poms - breizhcamp 2015

  • 1. BreizhCamp 2015 #BzhCmpBreizhCamp 2015 #BzhCmp Matthieu Bréchet - @mbrechet Loïc Truchot - @n_a_n35 builder, tester, livrer… sans tomber dans les 1
  • 2. Présentation des conférenciers Matthieu Bréchet Architecte Web @mbrechet Loïc Truchot Lead Dev Web @n_a_n35 2
  • 3. 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
  • 4. Notre application et notre besoin ● Une application full stack JavaScript o 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
  • 5. Notre choix : Gulp ● Le choix de Gulp o Maven sur notre projet VOD o 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
  • 7. Un build sous Maven ● Pour faire quoi ? ○ vérifier ○ builder ○ tester ○ packager ○ déployer… 7
  • 8. ● Faisable oui, mais avec des contraintes ○ performance ○ maintenabilité ○ environnement Un build sous Maven 8
  • 10. Installer Gulp pour builder ● Comment installer Gulp ? o NodeJS et NPM : https://nodejs.org/ o Installation globale ● gestion des plugins o le fichier package.json o installation et sauvegarde > npm install -g gulp > npm init > npm install --save gulp 10
  • 11. Gulp fonctionnement simple ● 1 fichier de description : le gulpfile ● 3 méthodes principales o task, src et dest ● une grande quantité de plugins disponibles o environ 1500 o mais aussi les plugins NPM http://gulpjs.com/plugins/ 11
  • 12. Gulp les bonnes pratiques ● 1 fichier par action ● Un répertoire spécifique pour le build ● le plugin run-sequence 12
  • 13. Lancer un build gulp ! ● Une commande : ● Pour une tache précise : > gulp > gulp <task> 13
  • 14. Aller plus loin avec Gulp 1/2 ● En quoi Gulp est-il “node friendly” ? o globs & vinyls o streams & pipe o plugin-gulp et NPM o asynchronicité, parallèlisme 14
  • 15. Aller plus loin avec Gulp 2/2 ● Le watch o compilation de html : la tâche watch-webfiles o et pour les scss ? 15
  • 16. Conclusion ● La promesse est tenue ! ● Gulp aujourd’hui o innombrables utilisateurs o activité encore quotidienne sur le repo github o faiblesses actuelles : erreurs, sourcemaps, site et docs - objectifs de la 4.0 ! ● Questions ? 16
  • 17. Annexe ● notre biblio o http://gulpjs.com o http://nodejs.org o http://gulpfiction.divshot.io/ o https://medium.com/@contrahacks/gulp- 3828e8126466 ● accéder à nos sources o demo : http://github.com/mbrechet/gulpfiction o présentation : https://goo.gl/VUj5Oy 17

Notes de l'éditeur

  1. Matthieu Bréchet : Bonjour, je suis architecte web depuis plusieurs années spécialisé dans la conception d’application « single page » en Javascript / HTML autour des l’univers multimédia
  2. Pourquoi Maven ? historique Intégration dans l’usine logicielle Eprouvé et reconnu
  3. Pourquoi ? Pour l’historique, souvent les projets webs de grande envergure sont développés en J2EE Logiciel de gestion et d’automatisation éprouvé et reconnu dans la communauté des dévelppeurs Des milliers de plugins sont disponibles ce qui rend la configuration entièrement modulable Complètement intégrable dans l’usine logicielle (Jenkins, nexus….) En arrière-plan vous pouvez voir un build maven de notre « trantinothèque » se dérouler, je vais vous détaillé quels sont les différents traitements effectué Pour faire quoi ? On s’appuie sur les phases de développement préétablit par maven pour y adjoindre des actions propre à un projet javascript Validate : on va vérifier les erreurs dans notre code avec un linter comme jshint par exemple Compile : génération des fichiers optimisés (css, js) Package : génértion d’un archive Deploy : mise à disposition du produit Faisable oui mais avec des contraintes environnement java maintenabilité performance