Yeoman / Grunt / Bower
Yeoman, Grunt, and Bower with Packaged Apps and AngularJS
Create a Chrome packaged application that uses the Google Drive API and an Angular application and add in support for manifest generation.
Setup
Yeoman
Find the following applications: generator-chromeapp and generator-angular
yo
npm -g install generator-{chromeapp,angular}
Chrome App Project (gDrive) s0
Setup
mkdir -p driveChrome && cd $_ yo chromeapp:app npm install
Chrome App Build
Building
grunt
Chrome App Verify
- View the application
- Tools > Extensions
- Load Unpacked Extension
Chrome App Feature (s3)
http://developer.chrome.com/apps/angular_framework.html
- Update the app functionality
- driveChrome is a sample application that uses Angular
- Rebuild as a watcher
- We're going to remove the hosted dependency on Angular
Chrome App Dependencies (s4)
Angular
bower install angular\#1.0.8 --save-dev
"devDependencies": { "angular": "~1.2" }
Chrome App Compression (s5)
npm install grunt-contrib-compress --save-dev
// grunt.loadNpmTasks('grunt-contrib-compress'); compress: { main: { options: { archive: 'archive.zip' }, files: [ {src: ['app/**']} ] } },
Angular Project (Buzz) (s10)
Setup
mkdir -p buzzAngular && cd $_ yo npm install grunt serve
Angular Chrome Manifest
npm install grunt-chrome-manifest --save-dev
grunt.loadNpmTasks('grunt-chrome-manifest'); grunt.registerTask('default', ['chromeManifest:dist']);
chromeManifest: { dist: { options: { buildnumber: 'both', background: { target: 'scripts/background.js', exclude: [ 'background/scripts/chromereload.js' ] } }, src: 'app', dest: 'dist' } }
Angular Application
{ "name": "Angular Package App Demo", "description": "Demo", "version": "1", "app": { "launch": { "local_path": "index.html" } }, "icons": { "16": "icon_16.png", "128": "icon_128.png" } }
Angular Dependencies
Update dependencies
"es5-shim": "~2.1.0", "jquery": "~2.0.3", "sass-bootstrap": "~3.0.0",
Yeoman Generators
yo --help
Grunt Plugins Angular
"grunt-autoprefixer": "~0.4.0", "grunt-concurrent": "~0.4.1", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-htmlmin": "~0.1.3", "grunt-contrib-imagemin": "~0.3.0", "grunt-contrib-jshint": "~0.7.1", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-watch": "~0.5.2", "grunt-google-cdn": "~0.2.0", "grunt-ngmin": "~0.0.2", "grunt-rev": "~0.1.0", "jshint-stylish": "~0.1.3", "load-grunt-tasks": "~0.2.0", "time-grunt": "~0.2.0"
Friction
- Offline access
- file:// development locally
- Version control and sub-module access
- Server-side integration
- Old tutorials
- Local build tools need local NPM hosting
Conclusion
- Useful in single page applications
- Merging generators will likely not result in the correct outcome
- Still very young
Questions?
- Deck: http://bit.ly/I0g5RN
- Generator: https://npmjs.org/package/generator-crangular
- Examples: https://github.com/jwalsh/gdg_2013-11-18_yo_grunt_bower
- Twitter: @jwalsh_
- GitHub: jwalsh