Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

1 994 vues

Publié le

Slides de la présentation Grunt, Bower, Yeoman ou comment automatiser un projet web SPA aux Microsoft TechDays 2015.

Introduction aux outils Grunt, Bower, Yeoman et en quoi ils sont liés.

Dans cette session, nous présenterons les bienfaits de l'automatisation, notamment dans les projets web complexes.

Publié dans : Technologie
  • Soyez le premier à commenter

Grunt, Bower, Yeoman ou comment automatiser un projet web SPA

  1. 1. AMBIENT INTELLIGENCE tech days• 2015 #mstechdays techdays.microsoft.fr
  2. 2. Grunt / Bower / Yeoman ou comment automatiser le développement d'un projet web SPA Maxime LUCE CEO @ Touchify maxime@touchify.co @TouchifyApp
  3. 3. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  4. 4. tech.days 2015#mstechdays  Gestion des dépendances  Compilation / Minification / Tests / Linting  Développement Tâches récurrentes d’un projet web Comment automatiser le développement d'un projet web SPA
  5. 5. tech.days 2015#mstechdays  Node.JS  Scripts simples mais puissant  Projet web donc javascript ! Outils d’automatisation Comment automatiser le développement d'un projet web SPA
  6. 6. tech.days 2015#mstechdays  Bower ?  Grunt ?  Yeoman ? Outils d’automatisation Comment automatiser le développement d'un projet web SPA
  7. 7. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  8. 8. tech.days 2015#mstechdays  Gestionnaire de librairies JS / CSS  Utilisé pour installer et mettre à jour les librairies  Assure l’intégrité des versions Définition Comment automatiser le développement d'un projet web SPA
  9. 9. tech.days 2015#mstechdays  Registre de librairies JS / CSS  Enregistre les versions dans un fichier bower.json  Arbre de dépendances plat Comment ça marche ? Comment automatiser le développement d'un projet web SPA
  10. 10. Bower # install bower $ npm install –g bower # install a package $ bower install jquery --save #install from github $ bower install user/repo --save-dev # install from url $ bower install http://path.to/script.js
  11. 11. tech.days 2015#mstechdays Bower Comment automatiser le développement d'un projet web SPA
  12. 12. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  13. 13. tech.days 2015#mstechdays  Gestionnaire de tâches Node.JS  Automatise les tâches récurrentes  Enormément de tâches dans NPM Définition Comment automatiser le développement d'un projet web SPA
  14. 14. tech.days 2015#mstechdays  Configuration dans un fichier Gruntfile.js  Tâches dans NPM ou en local  Simple !! Comment ça marche ? Comment automatiser le développement d'un projet web SPA
  15. 15. Grunt CLI # install grunt globally $ npm install –g grunt-cli # install grunt locally $ npm install grunt --save-dev # install a task $ npm install grunt-contrib-concat --save-dev # run a task $ grunt concat:dist
  16. 16. Gruntfile.js module.exports = function (grunt) { grunt.initConfig({ // task config concat: { dist: { src: "app/*.js", dest: "dist/app.js" } } }); // load task grunt.loadNpmTasks("grunt-contrib-concat"); // alias task grunt.registerTask("build", ["concat:dist"]); };
  17. 17. tech.days 2015#mstechdays Grunt Comment automatiser le développement d'un projet web SPA
  18. 18. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  19. 19. tech.days 2015#mstechdays  Gestionnaire de template de projets  Simplifie la création de projet et d’éléments  Force l’utilisation de bonnes pratiques Définition Comment automatiser le développement d'un projet web SPA
  20. 20. tech.days 2015#mstechdays  Générateurs dans NPM  Utilise Bower pour gérer les dépendances  Utilise Grunt pour gérer les tâches de compilation Comment ça marche ? Comment automatiser le développement d'un projet web SPA
  21. 21. Yeoman # install yeoman $ npm install –g yo # install generator $ npm install –g generator-backbone # run generator $ yo backbone # run sub generator $ yo backbone:model user
  22. 22. tech.days 2015#mstechdays Yeoman Comment automatiser le développement d'un projet web SPA
  23. 23. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  24. 24. Create a simple Grunt Task module.exports = function (grunt) { grunt.registerTask("myCustomTask", function () { // read package.json to get version var pkg = grunt.file.readJSON("package.json"); // get the version.js content var content = grunt.file.read("version.js"); // replace the tag {{version}} by the package’s version content = content.replace("{{version}}", pkg.version); // write the new content into version.js grunt.file.write("version.js", content); }); };
  25. 25. Create a multi Grunt Task module.exports = function (grunt) { grunt.registerMultiTask("myVersionTask", function () { var pkg = grunt.file.readJSON("package.json"); // loop over configured files this.files.forEach(function (file) { // loop over src / dest match file.src.forEach(function (src) { var content = grunt.file.read(src); content = content.replace("{{version}}", pkg.version); grunt.file.write("version.js", file.dest); }); }); }); };
  26. 26. Create a multi Grunt Task module.exports = function (grunt) { grunt.initConfig({ // task config myVersionTask: { dist: { src: "app/**/*.js", dest: "dist/" } } }); // load task from local directory grunt.loadTasks("tasks"); // alias task grunt.registerTask("build", ["myVersionTask:dist"]); };
  27. 27. tech.days 2015#mstechdays Grunt avancé Comment automatiser le développement d'un projet web SPA
  28. 28. tech.days 2015#mstechdaysComment automatiser le développement d'un projet web SPA
  29. 29. Create a Template • app/ • templates/ • … • index.js • model/ • templates/ • … • index.js
  30. 30. Create a Template var yeoman = require("yeoman-generator"); var CustomGenerator = yeoman.generators.Base.extend({ constructor: function () { }, prompting: function () { }, writing: { git: function () { }, bower: function () { }, gruntfile: function () { }, index: function () { }, mainjs: function () { }, }, install: function () { }, }); module.exports = CustomGenerator;
  31. 31. Create a Template // prompting var prompts = [{ type: "text", name: "title", message: "Title of the application" }]; this.prompt(prompts, function (answers) { this.title = answers.title; }); // writing this.fs.copy(this.templatePath("gitattributes"), this.destinationPath(".gitattributes")); this.fs.copyTpl(this.templatePath("_gruntfile.js"), this.destinationPath("Gruntfile.js"), { arg1: "value1" }); // installing this.installDependencies({ skipInstall: this.options["skip-install"] });
  32. 32. tech.days 2015#mstechdays Yeoman avancé Comment automatiser le développement d'un projet web SPA
  33. 33. tech.days 2015#mstechdays  Slides : http://fr.slideshare.net/Touchify/grunt-bower-yeoman-ou-comment- automatiser-un-projet-web-spa  Démo : https://github.com/spatools/techdays2015  Documentations : http://bower.io http://gruntjs.com http://yeoman.io Liens Comment automatiser le développement d'un projet web SPA
  34. 34. © 2015 Microsoft Corporation. All rights reserved. tech days• 2015 #mstechdays techdays.microsoft.fr

×