yeomanハンズオン in 福岡

Download Yeomanハンズオン in 福岡

Post on 19-May-2015

1.102 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

  • 1. 2014/03/15 () 13:00 - 18:00

2. Prole: ! HTML5Expert.jp html5j Angular Sencha UG CO-ORGANIZER @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ 3. 13:00-14:00 (LT) Yeoman - generator - CSS - 14:00-17:30 ! ! 17:30-18:00 YEOMANgenerator generator-generator grunt http://albatrosary.hateblo.jp/archive/category/grunt https://github.com/MSakamaki/GeneratorAPI 4. HTML CSS JavaScript Sass CoeeScript backbone underscore jQuery require Compass image imagemin htmlmin cssmin jsmin mocha chai Yuidoc HTML5 easymock 5. http://yeoman.io/ 6. Yeoman Google yo() grunt() bower() MODERN WORKFLOWS FOR MODERN WEBAPPS 7. 1. yo [generator] 2. grunt server 3. grunt build http://yeoman.io/ 8. Javamaven 9. $ npm install -g yo 10. generator http://yeoman.io/community-generators.html yo 11. $ yo backbone yo 12. yo 13. $ yo backbone:view view --coee $ yo backbone:model model --coee $ yo backbone:collection collection --coee $ yo backbone:router router --coee yo 14. bower Twitter bower components http://bower.io/search/ 15. bower bower.json 16. bower backbonejs { "name": "backbone-app", "version": "0.0.0", "dependencies": { "sass-bootstrap": " 3.0.0", "jquery": " 1.9.0", "underscore": " 1.4.3", "backbone": " 1.0.0", "requirejs": " 2.1.5", "requirejs-text": " 2.0.5", "modernizr": " 2.6.2", "backbone.localStorage": " 1.1.7" }, "devDependencies": {} } 17. bower $ bower install ! bower.json 18. bower $ bower install --save-dev [] ! bower.json 19. grunt grunt ? http://gruntjs.com/plugins 20. grunt gruntpackage.jsonGruntle.js 21. grunt package.json 22. grunt package.json { "name": "backbone-app", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": " 0.4.1", "grunt-contrib-copy": " 0.4.0", "grunt-contrib-concat": " 0.3.0", "grunt-contrib-coee": " 0.7.0", "grunt-contrib-jst": " 0.5.0", "grunt-contrib-uglify": " 0.2.0", "grunt-contrib-compass": " 0.5.0", "grunt-contrib-jshint": " 0.6.3", "grunt-contrib-cssmin": " 0.6.0", "grunt-contrib-connect": " 0.3.0", "grunt-contrib-clean": " 0.5.0", "grunt-contrib-htmlmin": " 0.1.3", "grunt-contrib-imagemin": " 0.2.0", "grunt-contrib-watch": " 0.5.2", "grunt-mocha": " 0.4.1", "grunt-usemin": " 0.1.10", "grunt-bower-requirejs": " 0.7.0", "grunt-requirejs": " 0.4.0", "grunt-rev": " 0.1.0", "grunt-open": " 0.2.0", "load-grunt-tasks": " 0.1.0", "connect-livereload": " 0.2.0", "time-grunt": " 0.2.1", "jshint-stylish": " 0.1.3" }, "engines": { "node": ">=0.8.0" } } 23. grunt $ npm install --save-dev [] ! package.json 24. grunt Gruntle.js 25. grunt Gruntle.js $ grunt serve $ grunt build $ grunt test $ grunt mock 26. YeomanHTML5 27.