BreizhCamp 2015 #BzhCmpBreizhCamp 2015 #BzhCmp
Matthieu Bréchet - @mbrechet
Loïc Truchot - @n_a_n35
builder, tester, livre...
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...
Notre application et notre besoin
● Une application full stack JavaScript
o Notre App: la “tarantino-thèque” (mini-vidéoth...
Notre choix : Gulp
● Le choix de Gulp
o Maven sur notre projet VOD
o Grunt VS Gulp : pas de gagnant
 Gulp - le moteur de ...
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
● gest...
Gulp fonctionnement simple
● 1 fichier de description :
le gulpfile
● 3 méthodes principales
o task, src et dest
● une gra...
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 N...
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 r...
Annexe
● notre biblio
o http://gulpjs.com
o http://nodejs.org
o http://gulpfiction.divshot.io/
o https://medium.com/@contr...
Prochain SlideShare
Chargement dans…5
×

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

757 vues

Publié le

Presentation about gulp, a nice Front End Workflow by @mbrechet and @n_a_n35 for Breizhcamp 2015

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

  1. 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. 2. Présentation des conférenciers Matthieu Bréchet Architecte Web @mbrechet Loïc Truchot Lead Dev Web @n_a_n35 2
  3. 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. 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. 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
  6. 6. MAVEN ? 6
  7. 7. Un build sous Maven ● Pour faire quoi ? ○ vérifier ○ builder ○ tester ○ packager ○ déployer… 7
  8. 8. ● Faisable oui, mais avec des contraintes ○ performance ○ maintenabilité ○ environnement Un build sous Maven 8
  9. 9. Gulp ? 9
  10. 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. 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. 12. Gulp les bonnes pratiques ● 1 fichier par action ● Un répertoire spécifique pour le build ● le plugin run-sequence 12
  13. 13. Lancer un build gulp ! ● Une commande : ● Pour une tache précise : > gulp > gulp <task> 13
  14. 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. 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. 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. 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

×