Yeomanについて

4,158 views

Published on

Yeomanについて

  1. 1. Yeomanを使ってみようJ.Sugiyama
  2. 2. Yeomanとは?最近流行のRIA開発において、「色々なめんどくさいこと」をさっくりこなしてくれるおっさんとその仲間たちのことである。
  3. 3. おっさんとその仲間たちhttp://yeoman.io/
  4. 4. Yo:Scaffold ProjectですBower:Twitter社のアレpackcageをmanagementしてくれますGrunt:有名なタスクランナー最適化とかコンパイルとか色々してくれます
  5. 5. この人たちは何をしてくれるのか?
  6. 6. HTMLとか、その辺の開発って結構手動でやってること多いと思います。
  7. 7. 例えば…•HTMLの宣言をいちいち書いたり•jQueryやらなんやらの最新版を漁ったり•CSSの初期化やらなんやら考えたり•デザインテンプレートを毎回書いたり•レスポンシブとか•Coffee Scriptとか•Sassとかetc etc...
  8. 8. 少しめんどくさい!
  9. 9. なんとかしてよ!Yeoman!
  10. 10. というわけで・・・
  11. 11. とりあえず使ってみる事にしましょう
  12. 12. Yeomanの使い方
  13. 13. Yeomanの使い方まずMacを用意します※まだWindows版はありません
  14. 14. Yeomanの使い方Yeomanをインストールする前に以下をインストールしておきます•Node.js•Ruby•Compass
  15. 15. Yeomanの使い方Consoleから$ npm install -g yo grunt-cli bower
  16. 16. Yeomanの使い方ちょっと長いのでちょっと休憩
  17. 17. Yeomanの使い方インストールが終わったらさっそくプロジェクトを作ってみましょう
  18. 18. Yeomanの使い方consoleから好きなディレクトリを開いて$ yo webapp
  19. 19. Yeomanの使い方色々聞かれるので適当に答えるとプロジェクト作成が開始されます
  20. 20. Yeomanの使い方これはかなり長いのでちょっと休憩
  21. 21. Yeomanの使い方Yoがこんな感じでファイルが生成してくれます。
  22. 22. Yeomanの使い方appディレクトリを見てみると・・・
  23. 23. Yeomanの使い方今まで手動で用意してきた諸々テンプレート
  24. 24. Yeomanの使い方欲しかった物がある程度 ってる!
  25. 25. Yeomanの使い方“めんどくさい”から解放!
  26. 26. Yeomanの使い方index.htmlを開いてみると、こんな感じYoのお仕事はここでいったん終了
  27. 27. Yeomanの使い方とりあえずindex.htmlを編集して・・・
  28. 28. Yeomanの使い方$ gruntでビルドしますgruntがcoffee scriptのコンパイルとかCSSの圧縮とかJSのテストとか色々やってくれます!
  29. 29. Yeomanの使い方gruntのお仕事こいつが結構重要今までバラバラなツールとかでやってきた CSS/JSの圧縮 coffee scriptのコンパイル Sassのコンパイル etc etc全部一括でやってくれる!
  30. 30. Yeomanの使い方“めんどくさい”から解放!
  31. 31. Yeomanの使い方ビルドが終わると、プロジェクトディレクトリに「dist」ディレクトリが作成されるコンパイルされたindex.htmlはこのような感じ
  32. 32. Yeomanの使い方そして魔法のコマンド$ grunt server:dist
  33. 33. Yeomanの使い方実行するとサーバが起動して、編修監視モードに移行!リアルタイムに編集がブラウザに反映される!これはこれでかなり便利!
  34. 34. Yeomanの使い方プロジェクト構築の中でjQueryやらunderscoreとかいちいち最新版を取りに行くのが面倒・・・
  35. 35. Yeomanの使い方そんなときは
  36. 36. Yeomanの使い方$ bower install (欲しいもの)
  37. 37. Yeomanの使い方その時点で最新のものをgithubなどから探してきて組み込んでくれます!めんどくさくなくて便利!
  38. 38. まとめ
  39. 39. まとめYoプロジェクトの枠組みを作るbowerプロジェクトで使うパッケージソフトを管理grunt作成したアプリをTest & Build -> Release!その他、自分で作成したテンプレートや、設定にて柔軟なプロジェクト進行が可能!
  40. 40. まとめ色々な”めんどくさい”から解放されたい
  41. 41. まとめそんなときはぜひ一度Yeomanを試してみてください!
  42. 42. ありがとうございました

×