Your SlideShare is downloading. ×
Node Tools For Your Grails Toolbox - Gr8Conf 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Node Tools For Your Grails Toolbox - Gr8Conf 2013

1,302
views

Published on

Grails has many tools available but when it comes to front end asset management (compile, concatenate, minify, cache-busting) there are a lot of nice tools coming out of the node.js space,

Grails has many tools available but when it comes to front end asset management (compile, concatenate, minify, cache-busting) there are a lot of nice tools coming out of the node.js space,

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Node.js Tools for Your Grails Toolbox Zan Thrash @zanthrash zan.thrash@objectpartners.com github.com/zanthrash Wednesday, August 7, 13
  • 2. “Modern” Web Apps “Ideal” Candidates Wednesday, August 7, 13
  • 3. “Modern” Web Apps “Ideal” Candidates Wednesday, August 7, 13
  • 4. “Modern” Web Apps Wednesday, August 7, 13
  • 5. Front End --------------------------------- Back  End Wednesday, August 7, 13
  • 6. Front End --------------------------------- Back  End Wednesday, August 7, 13
  • 7. Front End Wednesday, August 7, 13
  • 8. Front End Look & Feel Wednesday, August 7, 13
  • 9. Front End Look & Feel HTML, CSS Wednesday, August 7, 13
  • 10. Front End Look & Feel HTML, CSS Create Templates Wednesday, August 7, 13
  • 11. Front End Look & Feel HTML, CSS Create Templates JavaScript Wednesday, August 7, 13
  • 12. Front End --------------------------------- Back  End Wednesday, August 7, 13
  • 13. Front End --------------------------------- Back  End Wednesday, August 7, 13
  • 14. Back  End Wednesday, August 7, 13
  • 15. Back  End Functionallity Wednesday, August 7, 13
  • 16. Back  End Functionallity Process Requests Wednesday, August 7, 13
  • 17. Back  End Functionallity Process Requests Integrate With Services Wednesday, August 7, 13
  • 18. Back  End Functionallity Process Requests Integrate With Services Populate Templates Wednesday, August 7, 13
  • 19. “Modern” Web Apps Wednesday, August 7, 13
  • 20. “Modern” Web Apps Wednesday, August 7, 13
  • 21. “Modern” Web Apps Wednesday, August 7, 13
  • 22. “Modern” Web Apps Wednesday, August 7, 13
  • 23. “Modern” Web Apps Wednesday, August 7, 13
  • 24. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  • 25. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  • 26. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  • 27. Tools Wednesday, August 7, 13
  • 28. Tools Wednesday, August 7, 13
  • 29. Wednesday, August 7, 13
  • 30. Wednesday, August 7, 13
  • 31. Wednesday, August 7, 13
  • 32. Wednesday, August 7, 13
  • 33. 1.3.2 Wednesday, August 7, 13
  • 34. $ npm -version 1.3.2 Wednesday, August 7, 13
  • 35. $ npm -version 1.3.2 Wednesday, August 7, 13
  • 36. npm http GET https://registry.npmjs.org/npm npm http GET https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm Wednesday, August 7, 13
  • 37. $ npm update npm -g npm http GET https://registry.npmjs.org/npm npm http GET https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm Wednesday, August 7, 13
  • 38. $ npm update npm -g npm http GET https://registry.npmjs.org/npm npm http GET https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm npm http 304 https://registry.npmjs.org/npm Wednesday, August 7, 13
  • 39. npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 NAME DESCRIPTION AUTHOR DATE VERSION anvil.bower Bower support for anvil =a_robson 2013-01-13 23:00 0.0.4 awesomebox-bower Bower plugin for awesomebox =mattinsler 2013-04-01 06:06 0.2.0 bower The browser package manager. =fat =satazor 2013-07-12 23:13 0.10.0 Wednesday, August 7, 13
  • 40. $ npm search bower npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 NAME DESCRIPTION AUTHOR DATE VERSION anvil.bower Bower support for anvil =a_robson 2013-01-13 23:00 0.0.4 awesomebox-bower Bower plugin for awesomebox =mattinsler 2013-04-01 06:06 0.2.0 bower The browser package manager. =fat =satazor 2013-07-12 23:13 0.10.0 Wednesday, August 7, 13
  • 41. $ npm search bower npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573 NAME DESCRIPTION AUTHOR DATE VERSION anvil.bower Bower support for anvil =a_robson 2013-01-13 23:00 0.0.4 awesomebox-bower Bower plugin for awesomebox =mattinsler 2013-04-01 06:06 0.2.0 bower The browser package manager. =fat =satazor 2013-07-12 23:13 0.10.0 Wednesday, August 7, 13
  • 42. Wednesday, August 7, 13
  • 43. npm http GET https://registry.npmjs.org/bower npm http 304 https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/async npm http GET https://registry.npmjs.org/archy npm http GET https://registry.npmjs.org/colors npm http GET https://registry.npmjs.org/fstream npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/hogan.js npm http GET https://registry.npmjs.org/mkdirp npm http GET https://registry.npmjs.org/lodash npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/promptly npm http GET https://registry.npmjs.org/rc npm http GET https://registry.npmjs.org/read-package-json npm http GET https://registry.npmjs.org/request npm http GET https://registry.npmjs.org/rimraf npm http GET https://registry.npmjs.org/stable npm http GET https://registry.npmjs.org/tar npm http GET https://registry.npmjs.org/tmp npm http GET https://registry.npmjs.org/semver Wednesday, August 7, 13
  • 44. $ npm install bower -g npm http GET https://registry.npmjs.org/bower npm http 304 https://registry.npmjs.org/bower npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/async npm http GET https://registry.npmjs.org/archy npm http GET https://registry.npmjs.org/colors npm http GET https://registry.npmjs.org/fstream npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/hogan.js npm http GET https://registry.npmjs.org/mkdirp npm http GET https://registry.npmjs.org/lodash npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/promptly npm http GET https://registry.npmjs.org/rc npm http GET https://registry.npmjs.org/read-package-json npm http GET https://registry.npmjs.org/request npm http GET https://registry.npmjs.org/rimraf npm http GET https://registry.npmjs.org/stable npm http GET https://registry.npmjs.org/tar npm http GET https://registry.npmjs.org/tmp npm http GET https://registry.npmjs.org/semver Wednesday, August 7, 13
  • 45. $ npm install bower -g npm http 200 https://registry.npmjs.org/slice-stream/-/slice-stream-0.0.0.tgz npm http 304 https://registry.npmjs.org/underscore npm http 304 https://registry.npmjs.org/underscore.string npm http 304 https://registry.npmjs.org/traverse /usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower bower@0.10.0 /usr/local/lib/node_modules/bower !"" abbrev@1.0.4 !"" which@1.0.5 !"" stable@0.1.3 !"" archy@0.0.2 !"" colors@0.6.0-1 !"" nopt@2.0.0 !"" tmp@0.0.20 !"" async@0.2.9 !"" mkdirp@0.3.5 !"" semver@2.0.10 !"" rimraf@2.0.3 (graceful-fs@1.1.14) !"" promptly@0.1.0 (read@1.0.5) !"" fstream@0.1.23 (inherits@1.0.0, graceful-fs@2.0.0) !"" tar@0.1.17 (inherits@1.0.0, block-stream@0.0.6) !"" rc@0.3.0 (deep-extend@0.2.5, ini@1.1.0, optimist@0.3.7) !"" read-package-json@0.1.13 (lru-cache@2.0.4, slide@1.1.4, graceful-fs@1.2.3, semver@1.1.4, npmlog@0.0.4) !"" glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3, minimatch@0.2.12) !"" request@2.11.4 !"" hogan.js@2.0.0 !"" lodash@1.0.1 !"" unzip@0.1.7 (setimmediate@1.0.1, readable-stream@1.0.2, match-stream@0.0.1, binary@0.3.0, pullstream@0.4.0) #"" update-notifier@0.1.3 (semver@1.1.4, request@2.12.0, configstore@0.1.2) Wednesday, August 7, 13
  • 46. Wednesday, August 7, 13
  • 47. Wednesday, August 7, 13
  • 48. 0.10.0 Wednesday, August 7, 13
  • 49. $ bower -version 0.10.0 Wednesday, August 7, 13
  • 50. $ bower -version 0.10.0 Wednesday, August 7, 13
  • 51. Search results: marionette git://github.com/marionettejs/backbone.marionette.git backbone.marionette git://github.com/marionettejs/backbone.marionette backbone.marionette.handlebars git://github.com/asciidisco/Backbone.Marionet backbone.marionette.hbs git://github.com/svnlto/backbone.marionette.hbs.git marionette-formview git://git@git.onehealth.com:2022/marionette-formview.git marionette.formview git://github.com/onehealth/marionette.formview.git marionette-dust git://github.com/simonblee/marionette-dust.git backbone.marionette.dust git://github.com:simonblee/marionette-dust.git Wednesday, August 7, 13
  • 52. $ bower search marionette Search results: marionette git://github.com/marionettejs/backbone.marionette.git backbone.marionette git://github.com/marionettejs/backbone.marionette backbone.marionette.handlebars git://github.com/asciidisco/Backbone.Marionet backbone.marionette.hbs git://github.com/svnlto/backbone.marionette.hbs.git marionette-formview git://git@git.onehealth.com:2022/marionette-formview.git marionette.formview git://github.com/onehealth/marionette.formview.git marionette-dust git://github.com/simonblee/marionette-dust.git backbone.marionette.dust git://github.com:simonblee/marionette-dust.git Wednesday, August 7, 13
  • 53. $ bower search marionette Search results: marionette git://github.com/marionettejs/backbone.marionette.git backbone.marionette git://github.com/marionettejs/backbone.marionette backbone.marionette.handlebars git://github.com/asciidisco/Backbone.Marionet backbone.marionette.hbs git://github.com/svnlto/backbone.marionette.hbs.git marionette-formview git://git@git.onehealth.com:2022/marionette-formview.git marionette.formview git://github.com/onehealth/marionette.formview.git marionette-dust git://github.com/simonblee/marionette-dust.git backbone.marionette.dust git://github.com:simonblee/marionette-dust.git Wednesday, August 7, 13
  • 54. marionette Versions: - v1.0.4 - v1.0.3 - v1.0.2 - v1.0.1 - v1.0.0 - v1.0.0-rc6 - v1.0.0-rc5 - v1.0.0-rc4 - v1.0.0-rc3 - v1.0.0-rc2 - v1.0.0-rc1 - v1.0.0-beta6 - v1.0.0-beta5 - v1.0.0-beta4 - v1.0.0-beta3 - v1.0.0-beta2 - v1.0.0-beta1 - v0.10.2 - v0.10.1 Wednesday, August 7, 13
  • 55. $ bower info marionette marionette Versions: - v1.0.4 - v1.0.3 - v1.0.2 - v1.0.1 - v1.0.0 - v1.0.0-rc6 - v1.0.0-rc5 - v1.0.0-rc4 - v1.0.0-rc3 - v1.0.0-rc2 - v1.0.0-rc1 - v1.0.0-beta6 - v1.0.0-beta5 - v1.0.0-beta4 - v1.0.0-beta3 - v1.0.0-beta2 - v1.0.0-beta1 - v0.10.2 - v0.10.1 Wednesday, August 7, 13
  • 56. $ bower info marionette marionette Versions: - v1.0.4 - v1.0.3 - v1.0.2 - v1.0.1 - v1.0.0 - v1.0.0-rc6 - v1.0.0-rc5 - v1.0.0-rc4 - v1.0.0-rc3 - v1.0.0-rc2 - v1.0.0-rc1 - v1.0.0-beta6 - v1.0.0-beta5 - v1.0.0-beta4 - v1.0.0-beta3 - v1.0.0-beta2 - v1.0.0-beta1 - v0.10.2 - v0.10.1 Wednesday, August 7, 13
  • 57. marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  • 58. $ bower lookup marionette marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  • 59. $ bower lookup marionette marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  • 60. bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6Wednesday, August 7, 13
  • 61. $ bower install marionette#1.0.4 --save bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6Wednesday, August 7, 13
  • 62. $ bower install marionette#1.0.4 --save bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6 bower copying /Users/zanthrash/.bower/cache/backbone.babysitter/01138f4b1c33aea5 bower installing backbone#1.0.0 bower installing backbone.babysitter#0.0.6 bower installing backbone.marionette#1.0.4 bower installing backbone.wreqr#0.2.0 bower installing underscore#1.4.4 Wednesday, August 7, 13
  • 63. Wednesday, August 7, 13
  • 64. $ bower install git@github.com:timrwood/moment --save Wednesday, August 7, 13
  • 65. Wednesday, August 7, 13
  • 66. $ bower install timrwood/moment --save Wednesday, August 7, 13
  • 67. bower discover Please wait while newer package versions are being discovered backbone !"" backbone#1.0.0 !"" backbone.babysitter#0.0.6 !"$ backbone.marionette#1.0.4 % !"" backbone.babysitter#0.0.6 % !"" backbone.wreqr#0.2.0 % !"" backbone#1.0.0 % #"" underscore#1.4.4 (1.5.1 now available) !"" backbone.wreqr#0.2.0 #"" underscore#1.4.4 (1.5.1 now available) Wednesday, August 7, 13
  • 68. $ bower ls bower discover Please wait while newer package versions are being discovered backbone !"" backbone#1.0.0 !"" backbone.babysitter#0.0.6 !"$ backbone.marionette#1.0.4 % !"" backbone.babysitter#0.0.6 % !"" backbone.wreqr#0.2.0 % !"" backbone#1.0.0 % #"" underscore#1.4.4 (1.5.1 now available) !"" backbone.wreqr#0.2.0 #"" underscore#1.4.4 (1.5.1 now available) Wednesday, August 7, 13
  • 69. $ bower ls bower discover Please wait while newer package versions are being discovered backbone !"" backbone#1.0.0 !"" backbone.babysitter#0.0.6 !"$ backbone.marionette#1.0.4 % !"" backbone.babysitter#0.0.6 % !"" backbone.wreqr#0.2.0 % !"" backbone#1.0.0 % #"" underscore#1.4.4 (1.5.1 now available) !"" backbone.wreqr#0.2.0 #"" underscore#1.4.4 (1.5.1 now available) Wednesday, August 7, 13
  • 70. 0 { 1 "name": "my-project", 2 "version": "0.0.0", 3 "dependencies": { 4 "backbone.marionette": "~1.0.4" 5 } 6 } Wednesday, August 7, 13
  • 71. $ vim bower.json 0 { 1 "name": "my-project", 2 "version": "0.0.0", 3 "dependencies": { 4 "backbone.marionette": "~1.0.4" 5 } 6 } Wednesday, August 7, 13
  • 72. $ vim bower.json 0 { 1 "name": "my-project", 2 "version": "0.0.0", 3 "dependencies": { 4 "backbone.marionette": "~1.0.4" 5 } 6 } Wednesday, August 7, 13
  • 73. foo: 1.0.0 exact match foo: =1.0.0 exact match foo: >1.0.0 any version GT foo: <1.0.0 any version LT foo: >=1.0.0 any version GTE foo: <=1.0.0 any version LTE foo: >=1.0.0 < 1.0.9 range foo: ~1.2.0 range >=1.2.0 <1.3.0 Wednesday, August 7, 13
  • 74. bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6Wednesday, August 7, 13
  • 75. $ bower install bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6Wednesday, August 7, 13
  • 76. $ bower install bower cloning git://github.com/marionettejs/backbone.marionette bower cached git://github.com/marionettejs/backbone.marionette bower fetching backbone.marionette bower checking out backbone.marionette#v1.0.4 bower copying /Users/zanthrash/.bower/cache/backbone.marionette/c5a294db86d52de2 bower cloning git://github.com/marionettejs/backbone.babysitter.git bower cached git://github.com/marionettejs/backbone.babysitter.git bower fetching backbone.babysitter bower cloning git://github.com/documentcloud/underscore.git bower cached git://github.com/documentcloud/underscore.git bower fetching underscore bower cloning git://github.com/documentcloud/backbone.git bower cloning git://github.com/marionettejs/backbone.wreqr.git bower cached git://github.com/documentcloud/backbone.git bower fetching backbone bower cached git://github.com/marionettejs/backbone.wreqr.git bower fetching backbone.wreqr bower checking out underscore#1.4.4 bower copying /Users/zanthrash/.bower/cache/underscore/bb6098c6b4516eabbaea4e7f6 bower checking out backbone#1.0.0 bower copying /Users/zanthrash/.bower/cache/backbone/af8b217068fb65a3277b44d9cd3 bower checking out backbone.wreqr#v0.2.0 bower copying /Users/zanthrash/.bower/cache/backbone.wreqr/51d449eb48e59103e8e13 bower checking out backbone.babysitter#v0.0.6 bower copying /Users/zanthrash/.bower/cache/backbone.babysitter/01138f4b1c33aea5 bower installing backbone#1.0.0 bower installing backbone.babysitter#0.0.6 bower installing backbone.marionette#1.0.4 bower installing backbone.wreqr#0.2.0 bower installing underscore#1.4.4 Wednesday, August 7, 13
  • 77. bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.babysit bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.wreqr bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone bower uninstalling /Users/zanthrash/tmp/demo-angular/components/underscore Wednesday, August 7, 13
  • 78. $ bower uninstall marionette --save bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.babysit bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.wreqr bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone bower uninstalling /Users/zanthrash/tmp/demo-angular/components/underscore Wednesday, August 7, 13
  • 79. $ bower uninstall marionette --save bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.babysit bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.wreqr bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone bower uninstalling /Users/zanthrash/tmp/demo-angular/components/underscore Wednesday, August 7, 13
  • 80. { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  • 81. $ vim .bowerrc { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  • 82. $ vim .bowerrc { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  • 83. Wednesday, August 7, 13
  • 84. Wednesday, August 7, 13
  • 85. Wednesday, August 7, 13
  • 86. npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/nopt npm http 304 https://registry.npmjs.org/findup-sync npm http 200 https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http 200 https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inheritsWednesday, August 7, 13
  • 87. $ sudo npm install grunt-cli -g npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/nopt npm http 304 https://registry.npmjs.org/findup-sync npm http 200 https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http 200 https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inheritsWednesday, August 7, 13
  • 88. $ sudo npm install grunt-cli -g npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inherits npm http 304 https://registry.npmjs.org/minimatch npm http 304 https://registry.npmjs.org/graceful-fs npm http 304 https://registry.npmjs.org/inherits npm http GET https://registry.npmjs.org/lru-cache npm http GET https://registry.npmjs.org/sigmund npm http 304 https://registry.npmjs.org/sigmund npm http 304 https://registry.npmjs.org/lru-cache /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/ grunt grunt-cli@0.1.9 /usr/local/lib/node_modules/grunt-cli !"" resolve@0.3.1 !"" nopt@1.0.10 (abbrev@1.0.4) #"" findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21) Wednesday, August 7, 13
  • 89. This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 90. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 91. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 92. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 93. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 94. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 95. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 96. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 97. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 98. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 99. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository: keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 100. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 101. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: author: licence: (BSD) Wednesday, August 7, 13
  • 102. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: demo author: licence: (BSD) Wednesday, August 7, 13
  • 103. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: demo author: licence: (BSD) Wednesday, August 7, 13
  • 104. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: demo author: Zan Thrash licence: (BSD) Wednesday, August 7, 13
  • 105. $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (my-project) version: (0.0.0) 0.1.0 description: This is my awesome project entry point: (Gruntfile.js) test command: test git repository:http://github.com/zanthrash/my-project keywords: demo author: Zan Thrash licence: (BSD) Wednesday, August 7, 13
  • 106. Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) Wednesday, August 7, 13
  • 107. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) Wednesday, August 7, 13
  • 108. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) Wednesday, August 7, 13
  • 109. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) Wednesday, August 7, 13
  • 110. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) Wednesday, August 7, 13
  • 111. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) n Wednesday, August 7, 13
  • 112. $ grunt-init gruntfile Running "init:gruntfile" (init) task This task will create one or more files in the current directory, based on the environment and the answers to a few questions. Note that answering "?" to any question will show question-specific help and answering "none" to most questions will leave its value blank. "gruntfile" template notes: This template tries to guess file and directory paths, but you will most likely need to edit the generated Gruntfile.js file before running grunt. If you run grunt after generating the Gruntfile, and it exits with errors, edit the file! Please answer the following: [?] Is the DOM involved in ANY way? (Y/n) [?] Will files be concatenated or minified? (Y/n) [?] Will you have a package.json file? (Y/n) [?] Do you need to make any changes to the above before continuing? (y/N) n Wednesday, August 7, 13
  • 113. Wednesday, August 7, 13
  • 114. $ vim Gruntfile.js Wednesday, August 7, 13
  • 115. /*global module:false*/ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ // Metadata. meta: { version: '0.1.0' }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } },Wednesday, August 7, 13
  • 116. }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true,Wednesday, August 7, 13
  • 117. }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true,Wednesday, August 7, 13
  • 118. }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true,Wednesday, August 7, 13
  • 119. }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true,Wednesday, August 7, 13
  • 120. }, banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>n' + '* http://PROJECT_WEBSITE/n' + '* Copyright (c) <%= grunt.template.today("yyyy") %> ' + 'YOUR_NAME; Licensed MIT */n', // Task configuration. concat: { options: { banner: '<%= banner %>', stripBanners: true }, dist: { src: ['lib/FILE_NAME.js'], dest: 'dist/FILE_NAME.js' } }, uglify: { options: { banner: '<%= banner %>' }, dist: { src: '<%= concat.dist.dest %>', dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true,Wednesday, August 7, 13
  • 121. dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, unused: true, boss: true, eqnull: true, browser: true, globals: {} }, gruntfile: { src: 'Gruntfile.js' }, lib_test: { src: ['lib/**/*.js', 'test/**/*.js'] } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] },Wednesday, August 7, 13
  • 122. dest: 'dist/FILE_NAME.min.js' } }, jshint: { options: { curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, unused: true, boss: true, eqnull: true, browser: true, globals: {} }, gruntfile: { src: 'Gruntfile.js' }, lib_test: { src: ['lib/**/*.js', 'test/**/*.js'] } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] },Wednesday, August 7, 13
  • 123. } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-nodeunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Wednesday, August 7, 13
  • 124. } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-nodeunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Wednesday, August 7, 13
  • 125. } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-nodeunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Wednesday, August 7, 13
  • 126. } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-nodeunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Wednesday, August 7, 13
  • 127. } }, qunit: { files: ['test/**/*.html'] }, watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-nodeunit'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task. grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Wednesday, August 7, 13
  • 128. npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/nopt npm http 304 https://registry.npmjs.org/findup-sync npm http 200 https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http 200 https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inheritsWednesday, August 7, 13
  • 129. $ npm install grunt-contrib-concat --save npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/nopt npm http 304 https://registry.npmjs.org/findup-sync npm http 200 https://registry.npmjs.org/resolve npm http GET https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http 200 https://registry.npmjs.org/resolve/-/resolve-0.3.1.tgz npm http GET https://registry.npmjs.org/abbrev npm http GET https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inheritsWednesday, August 7, 13
  • 130. $ npm install grunt-contrib-concat --save npm http GET https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/abbrev npm http 304 https://registry.npmjs.org/lodash npm http 304 https://registry.npmjs.org/glob npm http GET https://registry.npmjs.org/minimatch npm http GET https://registry.npmjs.org/graceful-fs npm http GET https://registry.npmjs.org/inherits npm http 304 https://registry.npmjs.org/minimatch npm http 304 https://registry.npmjs.org/graceful-fs npm http 304 https://registry.npmjs.org/inherits npm http GET https://registry.npmjs.org/lru-cache npm http GET https://registry.npmjs.org/sigmund npm http 304 https://registry.npmjs.org/sigmund npm http 304 https://registry.npmjs.org/lru-cache /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/ grunt grunt-cli@0.1.9 /usr/local/lib/node_modules/grunt-cli !"" resolve@0.3.1 !"" nopt@1.0.10 (abbrev@1.0.4) #"" findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21) Wednesday, August 7, 13
  • 131. Wednesday, August 7, 13
  • 132. $ vim package.json Wednesday, August 7, 13
  • 133. 1 "name": "tmp", 2 "version": "0.0.0", 3 "description": "", 4 "main": "Gruntfile.js", 5 "dependencies": { 6 "grunt": "~0.4.1", 7 "grunt-contrib-concat": "~0.3.0", 8 "grunt-contrib-watch": "~0.4.4", 9 "grunt-contrib-nodeunit": "~0.2.0", 10 "grunt-contrib-uglify": "~0.2.2", 11 "grunt-contrib-jshint": "~0.6.0" 12 }, 13 "devDependencies": {}, 14 "scripts": { 15 "test": "echo "Error: no test specified" && exit 1" 16 }, 17 "author": "", 18 "license": "BSD" 19 } Wednesday, August 7, 13
  • 134. Wednesday, August 7, 13
  • 135. $ grunt Wednesday, August 7, 13
  • 136. Wednesday, August 7, 13
  • 137. $ grunt watch Wednesday, August 7, 13
  • 138. Wednesday, August 7, 13
  • 139. $ grunt watch:dev Wednesday, August 7, 13
  • 140. Useful Grunt Tasks grunt-contrib-coffee coffee: { dev: { files: [{ expand: true, cwd: 'web-app/angular/scripts', src: '**/*.coffee', dest: 'web-app/js/angular', ext: '.js' }] } } Wednesday, August 7, 13
  • 141. Useful Grunt Tasks grunt-contrib-jshint jshint: { options: { jshintrc: '.jshintrc', force: true }, all: [ 'test/spec/js/**/*.js', 'web-app/js/angular/**/*.js' ] }, Wednesday, August 7, 13
  • 142. Useful Grunt Tasks grunt-contrib-concat concat: { dist: { files: { web-app/scripts/scripts.js': [ web-app/js/{,*/}*.js' ] } } } Wednesday, August 7, 13
  • 143. Useful Grunt Tasks grunt-contrib-uglify uglify: { dist: { files: { 'web-app/scripts/scripts-min.js': [ 'web-app/js/{,*/}*.js' ] } } }, Wednesday, August 7, 13
  • 144. Useful Grunt Tasks grunt-karma karma: { unit: { configFile: 'karma.conf.js', port: 9999, singleRun: false, autoWatch: true , browsers: ['Chrome', ‘Firefox’, ‘Phantom’] }, jenkins: { configFile: 'karma.conf.js', port: 9998, singleRun: true, autoWatch: false, browsers: ['Firefox'] } } Wednesday, August 7, 13
  • 145. Useful Grunt Tasks grunt-contrib-livereload connect: { livereload: { options: { port: 8090, hostname: 'localhost' } } } <g:if env="development"> <script src="http://127.0.0.1:35729/livereload.js?snipver=1"> </script> </g:if> Wednesday, August 7, 13
  • 146. Useful Grunt Tasks grunt-contrib-watch watch: { coffee: { files: ['web-app/**/{,*/}*.coffee'], tasks: ['coffee:dist', 'coffeelint'] }, js: { files: [‘test/spec/js/**/*.js', 'web-app/js/angular/**/*.js' ] tasks: ['jshint:all'] }, compass: { files: ['web-app/**/{,*/}*.{scss,sass}'], tasks: ['compass'] }, livereload: { files: [ 'grails-app/views/**/{,*/}*.gsp', 'web-app/views/{,*/}*.html', 'web-app/css/{,*/}*.css', 'web-app/js/{,*/}*.js', 'web-app/images/{,*/}*.{png,jpg,jpeg,gif,webp}'Wednesday, August 7, 13
  • 147. Useful Grunt Tasks grunt-contrib-watch watch: { coffee: { files: ['web-app/**/{,*/}*.coffee'], tasks: ['coffee:dist', 'coffeelint'] }, js: { files: [‘test/spec/js/**/*.js', 'web-app/js/angular/**/*.js' ] tasks: ['jshint:all'] }, compass: { files: ['web-app/**/{,*/}*.{scss,sass}'], tasks: ['compass'] }, livereload: { files: [ 'grails-app/views/**/{,*/}*.gsp', 'web-app/views/{,*/}*.html', 'web-app/css/{,*/}*.css', 'web-app/js/{,*/}*.js', 'web-app/images/{,*/}*.{png,jpg,jpeg,gif,webp}' ], tasks: ['livereload'] } }, Wednesday, August 7, 13
  • 148. Useful Grunt Tasks grunt-usemin useminPrepare: { html: 'grails-app/views/index.gsp', options: { dest: 'web-app' } }, usemin: { html: 'grails-app/views/index.gsp' }, Wednesday, August 7, 13
  • 149. Useful Grunt Tasks grunt-usemin <!-- build:js(web-app) js/bundles/libraries.js --> <script src="components/jquery/jquery.js"></script> <script src="components/angular/angular.js"></script> <script src="components/underscore/underscore.js"></script> <!-- endbuild --> <!-- build:js(web-app) js/bundles/app-core.js --> <script src="js/angular/app.js"></script> <script src="js/angular/controllers/systemReferralController.js"></script> <script src="js/angular/controllers/cmaController.js"></script> <script src="js/angular/controllers/caseHistoryController.js"></script> <!-- endbuild --> Wednesday, August 7, 13
  • 150. Useful Grunt Tasks grunt-usemin <script src="js/bundles/libraries.js"></script> <script src="js/bundles/app-core.js"></script> Wednesday, August 7, 13
  • 151. Useful Grunt Tasks custom tasks grunt.registerTask('dev:watch', [ 'coffee:dist', 'compass', 'jshint', 'livereload-start', 'connect:livereload', 'watch' ]); Wednesday, August 7, 13
  • 152. Useful Grunt Tasks Others grunt-coffeelint grunt-copy grunt-contrib-clean grunt-exec grunt-notify grunt-devtools grunt-contrib-compress Wednesday, August 7, 13
  • 153. Wednesday, August 7, 13
  • 154. Wednesday, August 7, 13
  • 155. Wednesday, August 7, 13
  • 156. $ npm install -g yo Wednesday, August 7, 13
  • 157. webapp GENERATORS angular ember backbone chromeapp chrome-extension mocha jasmine karma Wednesday, August 7, 13
  • 158. Wednesday, August 7, 13
  • 159. $ npm install generator-angular Wednesday, August 7, 13
  • 160. Wednesday, August 7, 13
  • 161. $ npm install zanthrash/generator-grails-angular Wednesday, August 7, 13
  • 162. Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 163. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 164. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 165. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 166. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 167. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 168. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 169. $ yo grails-angular Would you like to include Twitter Bootstrap? (Y/n) If so, would you like to use Twitter Bootstrap for Sass (as opposed to vanilla CSS)? (Y/n) Would you like to use CoffeeScript (Y/n) Would you like to include angular-resource.js? (Y/n) Would you like to include angular-cookies.js? (Y/n) Would you like to include angular-sanitize.js? (Y/n) Wednesday, August 7, 13
  • 170. Writing compiled Bootstrap to web-app/angular/app create web-app/angular/app/styles/bootstrap.css create web-app/angular/app/index.html create bower.json create package.json create Gruntfile.js invoke grails-angular:common:/Users/zanthrash/tmp/node_modules/generator- grails-angular/app/index.js create .bowerrc create .editorconfig create .gitattributes create .jshintrc create .gitignore invoke grails-angular:main:/Users/zanthrash/tmp/node_modules/generator- grails-angular/app/index.js create web-app/angular/app/scripts/app.coffee Wednesday, August 7, 13
  • 171. Writing compiled Bootstrap to web-app/angular/app create web-app/angular/app/styles/bootstrap.css create web-app/angular/app/index.html create bower.json create package.json create Gruntfile.js invoke grails-angular:common:/Users/zanthrash/tmp/node_modules/generator- grails-angular/app/index.js create .bowerrc create .editorconfig create .gitattributes create .jshintrc create .gitignore invoke grails-angular:main:/Users/zanthrash/tmp/node_modules/generator- grails-angular/app/index.js create web-app/angular/app/scripts/app.coffee Wednesday, August 7, 13
  • 172. Usage: yo GENERATOR [args] [options] General options: -h, --help # Print generator's options and usage -f, --force # Overwrite files that already exist Please choose a generator below. Grails-angular grails-angular:app grails-angular:common grails-angular:controller grails-angular:directive grails-angular:filter grails-angular:main grails-angular:route grails-angular:service grails-angular:view Wednesday, August 7, 13
  • 173. $ yo grails-generator --help Usage: yo GENERATOR [args] [options] General options: -h, --help # Print generator's options and usage -f, --force # Overwrite files that already exist Please choose a generator below. Grails-angular grails-angular:app grails-angular:common grails-angular:controller grails-angular:directive grails-angular:filter grails-angular:main grails-angular:route grails-angular:service grails-angular:view Wednesday, August 7, 13
  • 174. $ yo grails-generator --help Usage: yo GENERATOR [args] [options] General options: -h, --help # Print generator's options and usage -f, --force # Overwrite files that already exist Please choose a generator below. Grails-angular grails-angular:app grails-angular:common grails-angular:controller grails-angular:directive grails-angular:filter grails-angular:main grails-angular:route grails-angular:service grails-angular:view Wednesday, August 7, 13
  • 175. create web-app/angular/scripts/directives/Foo.coffee create test/spec/directives/FooSpec.coffee Wednesday, August 7, 13
  • 176. $ yo grails-generator:directive Foo create web-app/angular/scripts/directives/Foo.coffee create test/spec/directives/FooSpec.coffee Wednesday, August 7, 13
  • 177. $ yo grails-generator:directive Foo create web-app/angular/scripts/directives/Foo.coffee create test/spec/directives/FooSpec.coffee Wednesday, August 7, 13
  • 178. 0 'use strict'; 1 2 angular.module('demoAngularApp') 3 .directive('Foo', () -> 4 template: '<div></div>' 5 restrict: 'E' 6 link: (scope, element, attrs) -> 7 element.text 'this is the Foo directive' 8 ) Wednesday, August 7, 13
  • 179. $ vim web-app/angular/scripts/directives/Foo.coffee 0 'use strict'; 1 2 angular.module('demoAngularApp') 3 .directive('Foo', () -> 4 template: '<div></div>' 5 restrict: 'E' 6 link: (scope, element, attrs) -> 7 element.text 'this is the Foo directive' 8 ) Wednesday, August 7, 13
  • 180. $ vim web-app/angular/scripts/directives/Foo.coffee 0 'use strict'; 1 2 angular.module('demoAngularApp') 3 .directive('Foo', () -> 4 template: '<div></div>' 5 restrict: 'E' 6 link: (scope, element, attrs) -> 7 element.text 'this is the Foo directive' 8 ) Wednesday, August 7, 13
  • 181. Questions Wednesday, August 7, 13
  • 182. Thank you Zan Thrash @zanthrash zan.thrash@objectpartners.com github.com/zanthrash Wednesday, August 7, 13