Yeoman RIAビルドツール超入門
- 1. Yeoman RIAビルドツール超入門 第6回HTML5など勉強会 2013.3.21 Bathtimefish 村岡 正和
- 2. 自己紹介 むらおか まさかず 村岡正和 @bathtimefish Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェス ティバル実行委員など HTML5-WEST.jp HTML5 JavaScript Python 中国拳法 主夫になりたい 炊事 Google Apps http://html5-west.jp/
- 3. ブログはじめました。 http://bathtimefish.hatenablog.com/ スターつけてもらったり リツイートされたりすると結構うれしいもんですね :)
- 4. まずは余談から
- 7. 大幅に仕様かわっとる！
- 8. ( .. ;)φ 再修行... なんとか間に合いました
- 10. 昨日までのおはなし 0.9以前つかってる人は migrate guideを 読みましょう。
- 15. つくりたいってなったら、
- 16. さっさと集中したい、
- 17. テキトーな準備で。
- 18. あったらいいなあ、でも下準備めんど いなあと思ういろいろ。 • ディレクトリ構成 • ローカルWebサーバー • CoffeeとかSassとか使う場合のコンパイル設定 • クロスプラットフォームなページのスケルトン。 ベストプラクティスなやつ。 • 最適化、軽量化 • いいかんじのライブラリとかプラグインさがすの etc...
- 19. 全部テキトーに やってくれる
- 20. だれが？
- 21. このオッサンが。
- 22. Yeoman
- 25. い ざ と い う と き の 際 立 っ た 働 き Yeoman s service デキるオッサン
- 26. こんな人にモロに刺さります。 • 制作テンプレ持ってない。つーか作るのメンドイ • 最近JavaScript書いてない。Coffee依存症 • 最適化・軽量化に細かいこだわりはない。いい感じ にやってほしい • Sass最高ヒャッハー！ こんなの • もうCompassでいいです • もうBootstrapでいいです
- 27. セットアップ
- 28. 黒い画面で、
- 29. npm install -g yo grunt-cli bower
- 30. ...と、そのまえに入れておくもの。 node.js (>=0.8.0) ruby compass ※ grunt0.3以前をインストールしている場合、アンインストールしておく。
- 31. Yeomanを構成するツール •yo scaffolding project •bower package manager •grunt task runner
- 32. Yo •Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaffoldingが可能。 HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。
- 33. Bower •JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管 理に便利。
- 34. Grunt •JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、フ ァイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神！
- 35. 実際につかってみる。
- 36. とりあえずコーディングはじめる前の じゅもん yo webapp npm install && bower install grunt server
- 37. リリースの呪文 grunt build or grunt server:dist
- 40. happy
- 41. coding.
- 42. Thanks.