Grunt.js and Yeoman, Continous Integration

download Grunt.js and Yeoman, Continous Integration

of 63

  • date post

    27-Jan-2015
  • Category

    Documents

  • view

    110
  • download

    0

Embed Size (px)

description

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

Transcript of Grunt.js and Yeoman, Continous Integration

  • 1. Grunt.jsThe build tool for the webfor the web-experience david.amend@it-amend.de

2. https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template 3. Technical Background 4. Content Why a build tool is needed for CI ? Why Grunt.js ? Demo Why Yeoman perfects Grunt.js 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. The process ofContinous IntegrationDeveloperCode CI-Server 7. The process of Continous IntegrationCloud WebserverDeveloperDeveloperBusiness/-CustomerCodeCI-ServerQA-Employee 8. The process of Continous IntegrationCloud WebserverDeveloperDeveloperBusiness/-CustomerCodeCI-ServerQA-Employee 9. Grunt.js node npm package https://npmjs.org/browse/depended/grunt http://benalman.com/news/2012/08/why-grunt/ 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. 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. 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. Basic Grunt.js tasks initGenerate project scaffolding from a predefined template 14. Create Standards withBootstrapping/ Templates 15. Basic Grunt.js tasks concatConcatenate files initGenerate project scaffolding from a predefined template lintValidate files with JSHint minMinify files with UglifyJS. 16. Basic Grunt.js tasks initGenerate project scaffolding from a predefined template lintValidate files with JSHint minMinify files with UglifyJS. serverStart a static node web server testRun unit tests with nodeunit. (Jasmine support) qunitRun QUnit unit tests in a headless PhantomJS instance. watchRun predefined tasks whenever watched files change. concatConcatenate files 17. AntExecuting my JS files in ${input.scripts.dir} ...Finished manipulating mx JS files 18. Rake - Rubydef uglify(script_file) output = `uglifyjs #{script_file}` #Did it work? if !$?.success? puts "Uglify Failed" Process.abort end outputend 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. 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. JavaScript for everyone"...even our Id-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. Balance of extendability DeclarativeScriptingConfiguration Approach 23. Build tool for the Web 24. Concepts of managing tasksGrunt.js file: grunt.loadNpmTasks(grunt-sample); grunt.loadTasks(tasksPath) grunt.loadTasks(tasks); grunt.registerTask(default, lint qunit concatmin); 25. Enriching Tasksgrunt.registerMultiTask( taskName, description, taskFunction); 26. Enriching Tasksgrunt.registerHelper("helloWorld", function(){ return "Hi you!!!";})grunt.helper(helloWorld); 27. Async-Supportvar done = this.async; // tell grunt to do task asyncsetTimeout(function(){var isSuccessful = Math.random() > 0.5;done(isSuccessful);} 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. Utils & Variables & more Warn, Error, Fatal grunt.utils._, grunt.utils.hooker grunt.task.current.file ... 30. Demo #1 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. Yeoman builds on topof Grunt.js package management like apt-get 33. DRY (Dont repeat yourself) Scaffolding & PrototypingCoding by conventionForcingto best practicesCommonJS Modulehttp://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21 34. Sharing best practices"I love the backboneboilerplate!"Tony Juli 1, 2012 at 1:25 am 35. Demo #2 36. My seamless workflow 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. 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. Additional Slides 40. Goals Create a baseline for developers Improve existing solutions Share knownledge Email me: David.Amend@it-amend.de 41. You are different ! 42. You are different ! 43. http://incident57.com/codekit/ 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....heres a new set of baseline skills required in order to besuccessful as a front-end developer, and developers who dont 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. http://jamesonjavascript.wordpress.com/2012/04/10/state-of-the-art/ 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 wouldnt take it too seriously. Of course, Id love to switch to glob now that it supports synchronous globbing, buttheres at least one issue thats blocking me from using it. 47. Build toolsant, maven (Java)nant (.NET)make ( C++)rake / Caphistrano 48. http://www.commitlogsfromlastnight.com 49. More responsibility 50. Fun @ work 51. ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js RivetRoto 52. ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js RivetRoto 53. Seamless Integration Anonymous metrics report to Google Analytics 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. 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. The process of Continous Integration DeveloperDeveloper Business/ -CustomerCode CI-Webserver QA-Employee 57. Continous Integration clean - compile - test - package Continous Delivery Metrics Saving timehttp://www.slideshare.net/bhavinjavia/continuous-integration-and-buildshttps://github.com/codedance/Retaliationhttp://www.cuberick.com/2008/10/continuous-int 58. Grunt-Contrib tasks bump clean coffee compress copy JST + Jade + Handlebars Mincss, Less, Stylus Require.js Yuidoc 59. ... as well as: ConfessGenerate Cache Manifest GrundIcon, OptiPNG & jpegtran Sass & Compass JsTestDriver Ant-Adapter https://github.com/millermedeiros/node-ant https://npmjs.org/browse/depended/grunt