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

664 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
664
Sur SlideShare
0
Issues des intégrations
0
Intégrations
77
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • Pourquoi Maven ?
    historique
    Intégration dans l’usine logicielle
    Eprouvé et reconnu
  • 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
  • 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

    ×