Node.js Tools for
Your Grails Toolbox
Zan Thrash
@zanthrash
zan.thrash@objectpartners.com
github.com/zanthrash
Wednesday, ...
“Modern” Web Apps
“Ideal” Candidates
Wednesday, August 7, 13
“Modern” Web Apps
“Ideal” Candidates
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
Front End
---------------------------------
Back	
  End
Wednesday, August 7, 13
Front End
---------------------------------
Back	
  End
Wednesday, August 7, 13
Front End
Wednesday, August 7, 13
Front End
Look & Feel
Wednesday, August 7, 13
Front End
Look & Feel
HTML, CSS
Wednesday, August 7, 13
Front End
Look & Feel
HTML, CSS
Create Templates
Wednesday, August 7, 13
Front End
Look & Feel
HTML, CSS
Create Templates
JavaScript
Wednesday, August 7, 13
Front End
---------------------------------
Back	
  End
Wednesday, August 7, 13
Front End
---------------------------------
Back	
  End
Wednesday, August 7, 13
Back	
  End
Wednesday, August 7, 13
Back	
  End
Functionallity
Wednesday, August 7, 13
Back	
  End
Functionallity
Process Requests
Wednesday, August 7, 13
Back	
  End
Functionallity
Process Requests
Integrate With Services
Wednesday, August 7, 13
Back	
  End
Functionallity
Process Requests
Integrate With Services
Populate Templates
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
“Modern” Web Apps
Wednesday, August 7, 13
“Ideal” Candidates
Full Stack
Wednesday, August 7, 13
“Ideal” Candidates
Full Stack
Wednesday, August 7, 13
“Ideal” Candidates
Full Stack
Wednesday, August 7, 13
Tools
Wednesday, August 7, 13
Tools
Wednesday, August 7, 13
Wednesday, August 7, 13
Wednesday, August 7, 13
Wednesday, August 7, 13
Wednesday, August 7, 13
1.3.2
Wednesday, August 7, 13
$ npm -version
1.3.2
Wednesday, August 7, 13
$ npm -version
1.3.2
Wednesday, August 7, 13
npm http GET https://registry.npmjs.org/npm
npm http GET https://registry.npmjs.org/npm
npm http 304 https://registry.npmj...
$ npm update npm -g
npm http GET https://registry.npmjs.org/npm
npm http GET https://registry.npmjs.org/npm
npm http 304 h...
$ npm update npm -g
npm http GET https://registry.npmjs.org/npm
npm http GET https://registry.npmjs.org/npm
npm http 304 h...
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573
npm http 200 https://registr...
$ npm search bower
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573
npm http ...
$ npm search bower
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1373906034573
npm http ...
Wednesday, August 7, 13
npm http GET https://registry.npmjs.org/bower
npm http 304 https://registry.npmjs.org/bower
npm http GET https://registry....
$ npm install bower -g
npm http GET https://registry.npmjs.org/bower
npm http 304 https://registry.npmjs.org/bower
npm htt...
$ npm install bower -g
npm http 200 https://registry.npmjs.org/slice-stream/-/slice-stream-0.0.0.tgz
npm http 304 https://...
Wednesday, August 7, 13
Wednesday, August 7, 13
0.10.0
Wednesday, August 7, 13
$ bower -version
0.10.0
Wednesday, August 7, 13
$ bower -version
0.10.0
Wednesday, August 7, 13
Search results:
marionette git://github.com/marionettejs/backbone.marionette.git
backbone.marionette git://github.com/mari...
$ bower search marionette
Search results:
marionette git://github.com/marionettejs/backbone.marionette.git
backbone.marion...
$ bower search marionette
Search results:
marionette git://github.com/marionettejs/backbone.marionette.git
backbone.marion...
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...
$ 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...
$ 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...
marionette git://github.com/marionettejs/backbone.marionette
Wednesday, August 7, 13
$ bower lookup marionette
marionette git://github.com/marionettejs/backbone.marionette
Wednesday, August 7, 13
$ bower lookup marionette
marionette git://github.com/marionettejs/backbone.marionette
Wednesday, August 7, 13
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git://github.com/marionettejs/backbone.marion...
$ bower install marionette#1.0.4 --save
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git:/...
$ bower install marionette#1.0.4 --save
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git:/...
Wednesday, August 7, 13
$ bower install git@github.com:timrwood/moment --save
Wednesday, August 7, 13
Wednesday, August 7, 13
$ bower install timrwood/moment --save
Wednesday, August 7, 13
bower discover Please wait while newer package versions are being discovered
backbone
!"" backbone#1.0.0
!"" backbone.baby...
$ bower ls
bower discover Please wait while newer package versions are being discovered
backbone
!"" backbone#1.0.0
!"" ba...
$ bower ls
bower discover Please wait while newer package versions are being discovered
backbone
!"" backbone#1.0.0
!"" ba...
0 {
1 "name": "my-project",
2 "version": "0.0.0",
3 "dependencies": {
4 "backbone.marionette": "~1.0.4"
5 }
6 }
Wednesday,...
$ vim bower.json
0 {
1 "name": "my-project",
2 "version": "0.0.0",
3 "dependencies": {
4 "backbone.marionette": "~1.0.4"
5...
$ vim bower.json
0 {
1 "name": "my-project",
2 "version": "0.0.0",
3 "dependencies": {
4 "backbone.marionette": "~1.0.4"
5...
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 vers...
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git://github.com/marionettejs/backbone.marion...
$ bower install
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git://github.com/marionettejs...
$ bower install
bower cloning git://github.com/marionettejs/backbone.marionette
bower cached git://github.com/marionettejs...
bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione
bower uninstalling /Users/zanthrash/tmp/d...
$ bower uninstall marionette --save
bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione
bower...
$ bower uninstall marionette --save
bower uninstalling /Users/zanthrash/tmp/demo-angular/components/backbone.marione
bower...
{
"directory": "bower_components",
"endpoint": "https://bower.mycompany.com",
"json": "my-bower.json"
}
Wednesday, August ...
$ vim .bowerrc
{
"directory": "bower_components",
"endpoint": "https://bower.mycompany.com",
"json": "my-bower.json"
}
Wed...
$ vim .bowerrc
{
"directory": "bower_components",
"endpoint": "https://bower.mycompany.com",
"json": "my-bower.json"
}
Wed...
Wednesday, August 7, 13
Wednesday, August 7, 13
Wednesday, August 7, 13
npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry.npmjs.org/grunt-cli
npm http GET https://r...
$ sudo npm install grunt-cli -g
npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry.npmjs.org/...
$ sudo npm install grunt-cli -g
npm http GET https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/abb...
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess ...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and trie...
Running "init:gruntfile" (init) task
This task will create one or more files in the current directory, based on the
enviro...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
$ grunt-init gruntfile
Running "init:gruntfile" (init) task
This task will create one or more files in the current directo...
Wednesday, August 7, 13
$ vim Gruntfile.js
Wednesday, August 7, 13
/*global module:false*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
meta:...
},
banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>n' +
'* http://PROJECT...
},
banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>n' +
'* http://PROJECT...
},
banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>n' +
'* http://PROJECT...
},
banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>n' +
'* http://PROJECT...
},
banner: '/*! PROJECT_NAME - v<%= meta.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>n' +
'* http://PROJECT...
dest: 'dist/FILE_NAME.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: tru...
dest: 'dist/FILE_NAME.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: tru...
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gru...
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gru...
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gru...
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gru...
}
},
qunit: {
files: ['test/**/*.html']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gru...
npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry.npmjs.org/grunt-cli
npm http GET https://r...
$ npm install grunt-contrib-concat --save
npm http GET https://registry.npmjs.org/grunt-cli
npm http 304 https://registry....
$ npm install grunt-contrib-concat --save
npm http GET https://registry.npmjs.org/lodash
npm http 304 https://registry.npm...
Wednesday, August 7, 13
$ vim package.json
Wednesday, August 7, 13
1 "name": "tmp",
2 "version": "0.0.0",
3 "description": "",
4 "main": "Gruntfile.js",
5 "dependencies": {
6 "grunt": "~0.4...
Wednesday, August 7, 13
$ grunt
Wednesday, August 7, 13
Wednesday, August 7, 13
$ grunt watch
Wednesday, August 7, 13
Wednesday, August 7, 13
$ grunt watch:dev
Wednesday, August 7, 13
Useful Grunt Tasks
grunt-contrib-coffee
coffee: {
dev: {
files: [{
expand: true,
cwd: 'web-app/angular/scripts',
src: '**/...
Useful Grunt Tasks
grunt-contrib-jshint
jshint: {
options: {
jshintrc: '.jshintrc',
force: true
},
all: [
'test/spec/js/**...
Useful Grunt Tasks
grunt-contrib-concat
concat: {
dist: {
files: {
web-app/scripts/scripts.js': [
web-app/js/{,*/}*.js'
]
...
Useful Grunt Tasks
grunt-contrib-uglify
uglify: {
dist: {
files: {
'web-app/scripts/scripts-min.js': [
'web-app/js/{,*/}*....
Useful Grunt Tasks
grunt-karma
karma: {
unit: {
configFile: 'karma.conf.js',
port: 9999,
singleRun: false,
autoWatch: true...
Useful Grunt Tasks
grunt-contrib-livereload
connect: {
livereload: {
options: {
port: 8090,
hostname: 'localhost'
}
}
}
<g...
Useful Grunt Tasks
grunt-contrib-watch
watch: {
coffee: {
files: ['web-app/**/{,*/}*.coffee'],
tasks: ['coffee:dist', 'cof...
Useful Grunt Tasks
grunt-contrib-watch
watch: {
coffee: {
files: ['web-app/**/{,*/}*.coffee'],
tasks: ['coffee:dist', 'cof...
Useful Grunt Tasks
grunt-usemin
useminPrepare: {
html: 'grails-app/views/index.gsp',
options: {
dest: 'web-app'
}
},
usemi...
Useful Grunt Tasks
grunt-usemin
<!-- build:js(web-app) js/bundles/libraries.js -->
<script src="components/jquery/jquery.j...
Useful Grunt Tasks
grunt-usemin
<script src="js/bundles/libraries.js"></script>
<script src="js/bundles/app-core.js"></scr...
Useful Grunt Tasks
custom tasks
grunt.registerTask('dev:watch', [
'coffee:dist',
'compass',
'jshint',
'livereload-start',
...
Useful Grunt Tasks
Others
grunt-coffeelint
grunt-copy
grunt-contrib-clean
grunt-exec
grunt-notify
grunt-devtools
grunt-con...
Wednesday, August 7, 13
Wednesday, August 7, 13
Wednesday, August 7, 13
$ npm install -g yo
Wednesday, August 7, 13
webapp
GENERATORS
angular
ember
backbone
chromeapp
chrome-extension
mocha
jasmine
karma
Wednesday, August 7, 13
Wednesday, August 7, 13
$ npm install generator-angular
Wednesday, August 7, 13
Wednesday, August 7, 13
$ npm install zanthrash/generator-grails-angular
Wednesday, August 7, 13
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for Sass (as opposed to ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
$ yo grails-angular
Would you like to include Twitter Bootstrap? (Y/n)
If so, would you like to use Twitter Bootstrap for ...
Writing compiled Bootstrap to web-app/angular/app
create web-app/angular/app/styles/bootstrap.css
create web-app/angular/a...
Writing compiled Bootstrap to web-app/angular/app
create web-app/angular/app/styles/bootstrap.css
create web-app/angular/a...
Usage: yo GENERATOR [args] [options]
General options:
-h, --help # Print generator's options and usage
-f, --force # Overw...
$ yo grails-generator --help
Usage: yo GENERATOR [args] [options]
General options:
-h, --help # Print generator's options ...
$ yo grails-generator --help
Usage: yo GENERATOR [args] [options]
General options:
-h, --help # Print generator's options ...
create web-app/angular/scripts/directives/Foo.coffee
create test/spec/directives/FooSpec.coffee
Wednesday, August 7, 13
$ yo grails-generator:directive Foo
create web-app/angular/scripts/directives/Foo.coffee
create test/spec/directives/FooSp...
$ yo grails-generator:directive Foo
create web-app/angular/scripts/directives/Foo.coffee
create test/spec/directives/FooSp...
0 'use strict';
1
2 angular.module('demoAngularApp')
3 .directive('Foo', () ->
4 template: '<div></div>'
5 restrict: 'E'
6...
$ vim web-app/angular/scripts/directives/Foo.coffee
0 'use strict';
1
2 angular.module('demoAngularApp')
3 .directive('Foo...
$ vim web-app/angular/scripts/directives/Foo.coffee
0 'use strict';
1
2 angular.module('demoAngularApp')
3 .directive('Foo...
Questions
Wednesday, August 7, 13
Thank you
Zan Thrash
@zanthrash
zan.thrash@objectpartners.com
github.com/zanthrash
Wednesday, August 7, 13
Upcoming SlideShare
Loading in …5
×

Node Tools For Your Grails Toolbox - Gr8Conf 2013

2,734 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,

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,734
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Node Tools For Your Grails Toolbox - Gr8Conf 2013

  1. 1. Node.js Tools for Your Grails Toolbox Zan Thrash @zanthrash zan.thrash@objectpartners.com github.com/zanthrash Wednesday, August 7, 13
  2. 2. “Modern” Web Apps “Ideal” Candidates Wednesday, August 7, 13
  3. 3. “Modern” Web Apps “Ideal” Candidates Wednesday, August 7, 13
  4. 4. “Modern” Web Apps Wednesday, August 7, 13
  5. 5. Front End --------------------------------- Back  End Wednesday, August 7, 13
  6. 6. Front End --------------------------------- Back  End Wednesday, August 7, 13
  7. 7. Front End Wednesday, August 7, 13
  8. 8. Front End Look & Feel Wednesday, August 7, 13
  9. 9. Front End Look & Feel HTML, CSS Wednesday, August 7, 13
  10. 10. Front End Look & Feel HTML, CSS Create Templates Wednesday, August 7, 13
  11. 11. Front End Look & Feel HTML, CSS Create Templates JavaScript Wednesday, August 7, 13
  12. 12. Front End --------------------------------- Back  End Wednesday, August 7, 13
  13. 13. Front End --------------------------------- Back  End Wednesday, August 7, 13
  14. 14. Back  End Wednesday, August 7, 13
  15. 15. Back  End Functionallity Wednesday, August 7, 13
  16. 16. Back  End Functionallity Process Requests Wednesday, August 7, 13
  17. 17. Back  End Functionallity Process Requests Integrate With Services Wednesday, August 7, 13
  18. 18. Back  End Functionallity Process Requests Integrate With Services Populate Templates Wednesday, August 7, 13
  19. 19. “Modern” Web Apps Wednesday, August 7, 13
  20. 20. “Modern” Web Apps Wednesday, August 7, 13
  21. 21. “Modern” Web Apps Wednesday, August 7, 13
  22. 22. “Modern” Web Apps Wednesday, August 7, 13
  23. 23. “Modern” Web Apps Wednesday, August 7, 13
  24. 24. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  25. 25. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  26. 26. “Ideal” Candidates Full Stack Wednesday, August 7, 13
  27. 27. Tools Wednesday, August 7, 13
  28. 28. Tools Wednesday, August 7, 13
  29. 29. Wednesday, August 7, 13
  30. 30. Wednesday, August 7, 13
  31. 31. Wednesday, August 7, 13
  32. 32. Wednesday, August 7, 13
  33. 33. 1.3.2 Wednesday, August 7, 13
  34. 34. $ npm -version 1.3.2 Wednesday, August 7, 13
  35. 35. $ npm -version 1.3.2 Wednesday, August 7, 13
  36. 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. 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. 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. 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. 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. 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. 42. Wednesday, August 7, 13
  43. 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. 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. 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. 46. Wednesday, August 7, 13
  47. 47. Wednesday, August 7, 13
  48. 48. 0.10.0 Wednesday, August 7, 13
  49. 49. $ bower -version 0.10.0 Wednesday, August 7, 13
  50. 50. $ bower -version 0.10.0 Wednesday, August 7, 13
  51. 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. 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. 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. 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. 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. 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. 57. marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  58. 58. $ bower lookup marionette marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  59. 59. $ bower lookup marionette marionette git://github.com/marionettejs/backbone.marionette Wednesday, August 7, 13
  60. 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. 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. 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. 63. Wednesday, August 7, 13
  64. 64. $ bower install git@github.com:timrwood/moment --save Wednesday, August 7, 13
  65. 65. Wednesday, August 7, 13
  66. 66. $ bower install timrwood/moment --save Wednesday, August 7, 13
  67. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 80. { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  81. 81. $ vim .bowerrc { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  82. 82. $ vim .bowerrc { "directory": "bower_components", "endpoint": "https://bower.mycompany.com", "json": "my-bower.json" } Wednesday, August 7, 13
  83. 83. Wednesday, August 7, 13
  84. 84. Wednesday, August 7, 13
  85. 85. Wednesday, August 7, 13
  86. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 113. Wednesday, August 7, 13
  114. 114. $ vim Gruntfile.js Wednesday, August 7, 13
  115. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 131. Wednesday, August 7, 13
  132. 132. $ vim package.json Wednesday, August 7, 13
  133. 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. 134. Wednesday, August 7, 13
  135. 135. $ grunt Wednesday, August 7, 13
  136. 136. Wednesday, August 7, 13
  137. 137. $ grunt watch Wednesday, August 7, 13
  138. 138. Wednesday, August 7, 13
  139. 139. $ grunt watch:dev Wednesday, August 7, 13
  140. 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. 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. 142. Useful Grunt Tasks grunt-contrib-concat concat: { dist: { files: { web-app/scripts/scripts.js': [ web-app/js/{,*/}*.js' ] } } } Wednesday, August 7, 13
  143. 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. 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. 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. 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. 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. 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. 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. 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. 151. Useful Grunt Tasks custom tasks grunt.registerTask('dev:watch', [ 'coffee:dist', 'compass', 'jshint', 'livereload-start', 'connect:livereload', 'watch' ]); Wednesday, August 7, 13
  152. 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. 153. Wednesday, August 7, 13
  154. 154. Wednesday, August 7, 13
  155. 155. Wednesday, August 7, 13
  156. 156. $ npm install -g yo Wednesday, August 7, 13
  157. 157. webapp GENERATORS angular ember backbone chromeapp chrome-extension mocha jasmine karma Wednesday, August 7, 13
  158. 158. Wednesday, August 7, 13
  159. 159. $ npm install generator-angular Wednesday, August 7, 13
  160. 160. Wednesday, August 7, 13
  161. 161. $ npm install zanthrash/generator-grails-angular Wednesday, August 7, 13
  162. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 175. create web-app/angular/scripts/directives/Foo.coffee create test/spec/directives/FooSpec.coffee Wednesday, August 7, 13
  176. 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. 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. 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. 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. 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. 181. Questions Wednesday, August 7, 13
  182. 182. Thank you Zan Thrash @zanthrash zan.thrash@objectpartners.com github.com/zanthrash Wednesday, August 7, 13

×