驰别辞尘补苍ではじめる爆速飞别产アプリ开発
- 1. Yeoman ではじめる爆速Webアプリ開発 Sencha UG 勉強会 #19@大阪 2014.4.18 Bathtime?sh 村岡 正和
- 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか?まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発?IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtime?sh
- 5. 今日のおはなし
- 10. コード書く前の準備いろいろ ? ディレクトリ構成 js/ styles/ images/ ... ? 制作用Webサーバー ? いいかんじのライブラリとかプラグインさがすの ? いい感じのHTML5ページのテンプレート ? 支援ツール altJS, js/css圧縮, Test ... etc...
- 11. このオッサンが全部用意します。
- 12. Yeoman
- 15. Yeoman s service デキるオッサン い ざ と い う と き の 際 立 っ た 働 き
- 16. こんな人にモロ刺さります。 ? 制作テンプレ持ってない。つーか作るのメンドイ ? 最初っからレスポンシブのテンプレがいい。 ? 最適化?軽量化に細かいこだわりはない。いい感じ にやってほしい ? JSライブラリさがすのだるい ? Sass最高ヒャッハー！ ? つーかWeb制作めんどくさい ? つーか仕事めんどくさい。生きるのもめんどい こんなの
- 17. セットアップ
- 18. 黒い画面で、
- 19. npm install -g yo
- 20. ...と、そのまえに入れておくもの。 node.js ruby (optional) compass (optional) ※ compass はgemで、node.jsは nodebrewが個人的にオススメ http://compass-style.org/ https://github.com/hokaccha/nodebrew
- 21. npm install -g generator-webapp
- 22. 飞别产补辫辫の作成
- 23. yo webapp
- 25. サーバーの起动
- 26. grunt server
- 27. リリース前のビルド
- 28. grunt build
- 29. 実际にやってみる
- 30. Yeomanを構成するツール yo grunt bower sca?olding preview, build, test package management
- 31. Yo ?Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのsca?oldingが可能。 HTML5 Boilerplate, Grunt?le.js, component.json, node_modulesの自動配置。
- 32. Bower ?JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
- 33. Grunt ?JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神！
- 38. bower install underscore.number --save grunt bowerInstall bower install したライブラリを依存ライブラリとともに webページに追加してくれる webappでのJSライブラリの追加
- 39. まずはこれだけ覚えよう！ $ yo webapp $ grunt server はじめる前のじゅもん リリースのじゅもん $ grunt build or $ grunt server:dist まずは Designing in the Browserを快適に楽しんでみるといいよ！
- 41. 応用编
- 42. 1. YeomanでAMD Asynchronous Module De?nition
- 45. RequireJSをとはつまり、 C言語の import とか Rubyの require みたいに JavaScriptで外部JavaScriptファイル の読み込みを実現するライブラリ
- 54. Grunt?le.js co?ee:dist ブロックにオプションを追加する 参考: https://github.com/gruntjs/grunt-contrib-coffee#readme optionsについてはgrunt-contrib-coffeeを参照 https://github.com/gruntjs/grunt-contrib-coffee
- 59. こうが、、、 Web Browser Yoman Preview Server (localhost:9000) API Server (localhost:3000) ?ajax request
- 60. こうなるイメージ Web Browser Yeoman Preview Server (localhost:9000) API Server (localhost:3000) Proxy Server (localhost:8000) ajax request
- 61. Yo, Grunt, Bower, (node.js) の相互依存 性が低いので工夫次第でいくらでも便利 にカスタマイズできる。:) これかなり重要！！
- 68. まとめ
- 70. ぜひ使ってみてください！
- 71. happy
- 72. ?coding
- 73. ?:)
- 74. Thanks.