Yeoman RIAビルドツール超入門

6,138 views
6,123 views

Published on

Published in: Technology

Yeoman RIAビルドツール超入門

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

×