Grunt.js and Yeoman, Continous Integration

31,595 views
31,526 views

Published on

A presentation about the build tool grunt js JavaScript for web applications and node.js environments to achieve continous integration. David Amend

Grunt.js and Yeoman, Continous Integration

  1. 1. Grunt.jsThe build tool for the webfor the web-experience david.amend@it-amend.de
  2. 2. https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template
  3. 3. Technical Background
  4. 4. Content● Why a build tool is needed for CI ?● Why Grunt.js ?● Demo● Why Yeoman perfects Grunt.js
  5. 5. Supports DevelopmentContinuous integrationaims to improve the quality of software,and to reduce the time taken to deliver it,by replacing the traditional practice ofapplying quality control after completing alldevelopment.
  6. 6. The process ofContinous IntegrationDeveloper Code CI-Server
  7. 7. The process of Continous Integration Cloud Webserver DeveloperDeveloper Business/ -Customer Code CI-Server QA-Employee
  8. 8. The process of Continous Integration Cloud Webserver DeveloperDeveloper Business/ -Customer Code CI-Server QA-Employee
  9. 9. Grunt.js● node npm package https://npmjs.org/browse/depended/grunt http://benalman.com/news/2012/08/why-grunt/
  10. 10. Grunt.js● node npm package● 3700++ Watches on Github https://npmjs.org/browse/depended/grunt http://benalman.com/news/2012/08/why-grunt/
  11. 11. Grunt.js● node npm package● 3700++ Watches on Github● TestSwarm, modernizr, jQuery, jQueryMobile https://npmjs.org/browse/depended/grunt http://benalman.com/news/2012/08/why-grunt/
  12. 12. Grunt.js● node npm package● 3700++ Watches on Github● TestSwarm, modernizr, jQuery, jQueryMobile https://npmjs.org/browse/depended/grunt http://benalman.com/news/2012/08/why-grunt/
  13. 13. Basic Grunt.js tasks● init Generate project scaffolding from a predefined template
  14. 14. Create Standards withBootstrapping/ Templates
  15. 15. Basic Grunt.js tasks● concat Concatenate files● init Generate project scaffolding from a predefined template● lint Validate files with JSHint● min Minify files with UglifyJS.
  16. 16. Basic Grunt.js tasks● init Generate project scaffolding from a predefined template● lint Validate files with JSHint● min Minify files with UglifyJS.● server Start a static node web server● test Run unit tests with nodeunit. (Jasmine support)● qunit Run QUnit unit tests in a headless PhantomJS instance.● watch Run predefined tasks whenever watched files change.● concat Concatenate files
  17. 17. Ant<target name="js-compile-all" description="What does it do?" unless="skip-js-compile"> <echo>Executing my JS files in ${input.scripts.dir} ...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg lmaxine="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js"/> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished manipulating mx JS files</echo></target>
  18. 18. Rake - Rubydef uglify(script_file) output = `uglifyjs #{script_file}` #Did it work? if !$?.success? puts "Uglify Failed" Process.abort end outputend
  19. 19. Grunt.jsgrunt.initConfig({ min: { dist: { src: [dist/built.js], dest: dist/built.min.js } }}); http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  20. 20. Easiest Syntax: JavaScriptgrunt.initConfig({ min: { dist: { src: [dist/built.js], dest: dist/built.min.js } }}); http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  21. 21. JavaScript for everyone"...even our I’d-rather-not-touch-JavaScript-even-with-a-very-long-stickbackend developers,speak some JavaScript." http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  22. 22. Balance of extendability Declarative Scripting Configuration Approach
  23. 23. Build tool for the Web
  24. 24. Concepts of managing tasksGrunt.js file:● grunt.loadNpmTasks(grunt-sample);● grunt.loadTasks(tasksPath)● grunt.loadTasks(tasks);● grunt.registerTask(default, lint qunit concat min);
  25. 25. Enriching Tasksgrunt.registerMultiTask( taskName, description, taskFunction);
  26. 26. Enriching Tasksgrunt.registerHelper("helloWorld", function(){ return "Hi you!!!";})grunt.helper(helloWorld);
  27. 27. Async-Supportvar done = this.async; // tell grunt to do task asyncsetTimeout(function(){ var isSuccessful = Math.random() > 0.5; done(isSuccessful);}
  28. 28. Async-Supportvar done = this.async; // tell grunt to do task asyncsetTimeout(function(){ var isSuccessful = Math.random() > 0.5; done(isSuccessful);}this.requires(random);
  29. 29. Utils & Variables & more● Warn, Error, Fatal● grunt.utils._, grunt.utils.hooker● grunt.task.current.file● ...
  30. 30. Demo #1
  31. 31. YeomanYeoman is a robust and opinionatedset of tools, librariesand a workflowthat can help developers to buildbeautiful, compelling web apps.@By Paul Irish, Addy Osmani,Sindre Sorhus, Mickael Daniel,Eric Bidelman ...
  32. 32. Yeoman builds on topof Grunt.js● package management like apt-get
  33. 33. DRY (Dont repeat yourself)● Scaffolding & Prototyping Coding by convention Forcing to best practices CommonJS Module http://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21
  34. 34. Sharing best practices"I love the backboneboilerplate!"Tony Juli 1, 2012 at 1:25 am
  35. 35. Demo #2
  36. 36. My seamless workflow
  37. 37. Any Questions ?● Against Grunt.js as a build system http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/● Reply : Why Grunt.js http://benalman.com/news/2012/08/why-grunt/david.amend@it-amend.de
  38. 38. ArticlesGoogle IO, Better web app developmentthrough toolinghttp://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21Blog about last commit commentshttp://www.commitlogsfromlastnight.com/Grunt-modernizr, builder which runs in TravisCIhttps://github.com/doctyper/grunt-modernizrContinous Integration in generalhttp://www.slideshare.net/bhavinjavia/continuous-integration-and-buildsExample of grunt usagehttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  39. 39. Additional Slides
  40. 40. Goals● Create a baseline for developers● Improve existing solutions● Share knownledge Email me: David.Amend@it-amend.de
  41. 41. You are different !
  42. 42. You are different !
  43. 43. http://incident57.com/codekit/
  44. 44. Tools to unify development"I wrote a README the other day for a project ... and as I was writing it,I realized that it was the sort of thing that might have intimidated thehell out of me a couple of years ago, what with its casual mentions ofNode, npm, Homebrew, git, tests, and development andproduction builds."...Many members of the community – myself included – lackedtraditional programming experience. HTML, CSS, and JavaScript –usually in the form of jQuery – were self-taught skills....here’s a new set of baseline skills required in order to besuccessful as a front-end developer, and developers who don’t meetthis baseline are going to start feeling more and more left behind asthose who are sharing their knowledge start to assume that certainthings go without saying.by Rebecca Murphy (+Paul Irish, Mike Taylor, Angus Croll, and Vlad Filippov) http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
  45. 45. http://jamesonjavascript.wordpress.com/2012/04/10/state-of-the-art/
  46. 46. Community rulesGrunt uses async for asynchronous function queue processing, dateformat for formatting dates and temporary for creating temporary files.But on the other hand, I wanted synchronous globbing, and the excellent glob was async-only at the time… so I wrote my own. I even called itglob-whatev so that people wouldn’t take it too seriously. Of course, I’d love to switch to glob now that it supports synchronous globbing, butthere’s at least one issue that’s blocking me from using it.
  47. 47. Build toolsant, maven (Java)nant (.NET)make ( C++)rake / Caphistrano
  48. 48. http://www.commitlogsfromlastnight.com
  49. 49. More responsibility
  50. 50. Fun @ work
  51. 51. ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js RivetRoto
  52. 52. ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js RivetRoto
  53. 53. Seamless Integration ● Anonymous metrics report to Google Analytics
  54. 54. XXX aims to improve thequality of software, and toreduce the time taken to deliver it, byreplacing the traditional practiceof applying quality control after completing alldevelopment. http://en.wikipedia.org/
  55. 55. XXX aims to improve thequality of software, and toreduce the time taken to deliver it, by replacing applyingthe traditional practice ofquality control aftercompleting all development.
  56. 56. The process of Continous Integration DeveloperDeveloper Business/ -Customer Code CI-Webserver QA-Employee
  57. 57. Continous Integration● clean - compile - test - package● Continous Delivery● Metrics● Saving time http://www.slideshare.net/bhavinjavia/continuous-integration-and-builds https://github.com/codedance/Retaliation http://www.cuberick.com/2008/10/continuous-int
  58. 58. Grunt-Contrib tasks● bump● clean● coffee● compress● copy● JST + Jade + Handlebars● Mincss, Less, Stylus● Require.js● Yuidoc
  59. 59. ... as well as:● Confess Generate Cache Manifest● GrundIcon, OptiPNG & jpegtran● Sass & Compass● JsTestDriver● Ant-Adapter https://github.com/millermedeiros/node-ant https://npmjs.org/browse/depended/grunt

×