Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
フロントエンドのツール
Yeomanを
勘違いしていた
2013/06/29 #daiNagoyaJS vol.6
13年6月29日土曜日
自己紹介
13年6月29日土曜日
自己紹介
• ぎりぎりばうあー @girigiribauer
13年6月29日土曜日
自己紹介
• ぎりぎりばうあー @girigiribauer
• なごや
13年6月29日土曜日
自己紹介
• ぎりぎりばうあー @girigiribauer
• なごや
• 仕事でフロントエンド的なこと
13年6月29日土曜日
自己紹介
• ぎりぎりばうあー @girigiribauer
• なごや
• 仕事でフロントエンド的なこと
• 2013年6月、無職してみました
13年6月29日土曜日
勘違い
13年6月29日土曜日
勘違い
13年6月29日土曜日
勘違い
• 初期のころに見せてもらった Yeoman の
デモで、最初のコマンドを打つと
大量にファイルを読み込むのを見て、
勝手に「これ使えないなー」と判断してた
13年6月29日土曜日
勘違い
• 初期のころに見せてもらった Yeoman の
デモで、最初のコマンドを打つと
大量にファイルを読み込むのを見て、
勝手に「これ使えないなー」と判断してた
• Gruntと連携するのは知ってたけど、Grunt
だけでいいんじゃないの?...
勘違い
• 初期のころに見せてもらった Yeoman の
デモで、最初のコマンドを打つと
大量にファイルを読み込むのを見て、
勝手に「これ使えないなー」と判断してた
• Gruntと連携するのは知ってたけど、Grunt
だけでいいんじゃないの?...
間違ってた
• 少し調べてみたら可能性を感じた
ので、どんな風に使えそうか
調べてみたのを共有します
• あまり時間とれなかったので
簡単な資料でごめんなさい・・・
13年6月29日土曜日
Yeomanの前に
• 事前知識をさらっと
• Node.js(略)
• npm
• Grunt
• bower
13年6月29日土曜日
npm: Node Package
Manager
• Perlの cpan, Rubyの gem に相当
• Node.js のパッケージ管理
• 開発ツールとしてもよく使う
• npm install -g foobar で
グローバルにイ...
Grunt: JavaScript Task
Runner
• lintしたりビルド走らせたり
テスト走らせたり
• 最小化したり単一ファイル化したり
画像のスプライト化したり
• npmで grunt-foobar みたいなのが
大量に公開さ...
bower: A package
manager for the web
• npm install -g bower で入れて
さらにその上で動く
• HTML / CSS / JavaScript 中心の
パッケージ管理
• bower i...
Yeoman
13年6月29日土曜日
Yeoman
ちなみに今 Yeoman 1.0(beta)ですが、
1.0 より前の仕様は全然知りません
13年6月29日土曜日
13年6月29日土曜日
インストールなど
• node, npmが入っている前提で
• npm install -g yo grunt-cli bower
• Yeoman (yo)
• Grunt (grunt-cli)
• bower
13年6月29日土曜日
勘違いしてたところ1
13年6月29日土曜日
勘違いしてたところ1
1.npm で generator (scaffolding) が
公開されてる
13年6月29日土曜日
勘違いしてたところ1
1.npm で generator (scaffolding) が
公開されてる
2.npm search yeoman-generator で
generator を探せる
13年6月29日土曜日
勘違いしてたところ1
1.npm で generator (scaffolding) が
公開されてる
2.npm search yeoman-generator で
generator を探せる
3.generator-foobar は Ye...
generator いろいろ
• generator-angular
• generator-backbone
• generator-ember
• generator-jquery(jQueryプラグイン用)
• generator-chr...
さらにいろいろ
• generator-webapp(HTML5 Boilerplate, jQuery,
Modernizr, RequireJS, CSS autoprefixerてんこもり)
• generator-wordpress(対...
generator を使った
scaffolding
13年6月29日土曜日
generator を使った
scaffolding
• 大まかな流れ
13年6月29日土曜日
generator を使った
scaffolding
• 大まかな流れ
1.npm search yeoman-generator
13年6月29日土曜日
generator を使った
scaffolding
• 大まかな流れ
1.npm search yeoman-generator
2.npm install -g yeoman-foobar
13年6月29日土曜日
generator を使った
scaffolding
• 大まかな流れ
1.npm search yeoman-generator
2.npm install -g yeoman-foobar
3.yo foobar
13年6月29日土曜日
簡単なscaffoldingのデモ
13年6月29日土曜日
※動かなかったときのための保険用キャプチャ
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
13年6月29日土曜日
generator を使った
scaffolding
• 必要十分な足場としてのファイルが
コマンド1つで用意される
• generator が npm で公開できる
仕組み
13年6月29日土曜日
勘違いしてたところ2
13年6月29日土曜日
勘違いしてたところ2
• generatorは当然自分で作れる
13年6月29日土曜日
勘違いしてたところ2
• generatorは当然自分で作れる
• 気に入る generator が無くても
自分で作れる、npm に公開も可能
13年6月29日土曜日
勘違いしてたところ2
• generatorは当然自分で作れる
• 気に入る generator が無くても
自分で作れる、npm に公開も可能
• generatorを作るgenerator、
generator-generator がある
...
generator-generator
• npm install -g generator-generator
13年6月29日土曜日
generator-bauer を作る
13年6月29日土曜日
generator-bauer を作る
• yo bauer って打つだけで
自分用のばうあーコマンドで
scaffolding が・・・!
13年6月29日土曜日
generator-bauer を作る
• 全部で4ステップ
1.同名のディレクトリを作る
2.generator-generator で生成して
必要に応じてカスタマイズ
3.リンク貼る
4.yo bauer
13年6月29日土曜日
generator-bauer(1)
• mkdir generator-bauer
• cd generator-bauer/
• ※後でnpm としてシンボリックリン
ク貼るので、ディレクトリは同じ名前
にする
13年6月29日土曜日
generator-bauer(2)
• yo generator
=> generator 用のファイル一式
• package.json, app/index.js あたりが
npm の中心的なファイル
• もちろんそのまま動くし、
app...
generator-bauer(3)
• npm link
• 自分の場合、/usr/local/share/npm/
lib/node_modules/generator-bauer
にシンボリックリンク貼られる
• node のモジュールの...
generator-bauer(4)
• (別の場所で)
mkdir bauer && cd bauer/
ディレクトリ名は違ってもOK
• yo bauer
=> generator-bauer のファイル一式
が出来る
13年6月29日土曜日
まとめ
• Yeoman はフロントエンドのツール
じゃなくてインフラだった
しかも汎用性高い
• generator の公開までしなくても、
npm link でリンク貼って
yo foobar とかで動かすような、
自作 generator...
参考URL
• Yeoman
http://yeoman.io/
http://yeoman.io/generators.html
下は generator-generator の説明
• Grunt
http://gruntjs.com/
•...
参考URL
• Yeoman generator path/naming issue with npm link when
gen dir is not "generator-_____"
https://github.com/yeoman/y...
Upcoming SlideShare
Loading in …5
×

フロントエンドのツール Yeoman を勘違いしていた

26,298 views

Published on

Yeoman を勘違いしてスルーしてたところもあったので、
改めてこんなメリットがあるんだーみたいなところを共有しつつ、
必要性を感じられる人が使い始める機会になれればと思います。
僕もこれからちょいちょい使っていきたいです。

Published in: Technology
  • Be the first to comment

フロントエンドのツール Yeoman を勘違いしていた

  1. 1. フロントエンドのツール Yeomanを 勘違いしていた 2013/06/29 #daiNagoyaJS vol.6 13年6月29日土曜日
  2. 2. 自己紹介 13年6月29日土曜日
  3. 3. 自己紹介 • ぎりぎりばうあー @girigiribauer 13年6月29日土曜日
  4. 4. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや 13年6月29日土曜日
  5. 5. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや • 仕事でフロントエンド的なこと 13年6月29日土曜日
  6. 6. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや • 仕事でフロントエンド的なこと • 2013年6月、無職してみました 13年6月29日土曜日
  7. 7. 勘違い 13年6月29日土曜日
  8. 8. 勘違い 13年6月29日土曜日
  9. 9. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた 13年6月29日土曜日
  10. 10. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた • Gruntと連携するのは知ってたけど、Grunt だけでいいんじゃないの?と思っていた 13年6月29日土曜日
  11. 11. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた • Gruntと連携するのは知ってたけど、Grunt だけでいいんじゃないの?と思っていた • ただ特定のファイル群を最初に用意してくれ るだけ(scaffolding)だと思っていた 13年6月29日土曜日
  12. 12. 間違ってた • 少し調べてみたら可能性を感じた ので、どんな風に使えそうか 調べてみたのを共有します • あまり時間とれなかったので 簡単な資料でごめんなさい・・・ 13年6月29日土曜日
  13. 13. Yeomanの前に • 事前知識をさらっと • Node.js(略) • npm • Grunt • bower 13年6月29日土曜日
  14. 14. npm: Node Package Manager • Perlの cpan, Rubyの gem に相当 • Node.js のパッケージ管理 • 開発ツールとしてもよく使う • npm install -g foobar で グローバルにインストール (-g なしでプロジェクトごと) 13年6月29日土曜日
  15. 15. Grunt: JavaScript Task Runner • lintしたりビルド走らせたり テスト走らせたり • 最小化したり単一ファイル化したり 画像のスプライト化したり • npmで grunt-foobar みたいなのが 大量に公開されてる 13年6月29日土曜日
  16. 16. bower: A package manager for the web • npm install -g bower で入れて さらにその上で動く • HTML / CSS / JavaScript 中心の パッケージ管理 • bower install foobar • 名前が気に入ってる 13年6月29日土曜日
  17. 17. Yeoman 13年6月29日土曜日
  18. 18. Yeoman ちなみに今 Yeoman 1.0(beta)ですが、 1.0 より前の仕様は全然知りません 13年6月29日土曜日
  19. 19. 13年6月29日土曜日
  20. 20. インストールなど • node, npmが入っている前提で • npm install -g yo grunt-cli bower • Yeoman (yo) • Grunt (grunt-cli) • bower 13年6月29日土曜日
  21. 21. 勘違いしてたところ1 13年6月29日土曜日
  22. 22. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 13年6月29日土曜日
  23. 23. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 2.npm search yeoman-generator で generator を探せる 13年6月29日土曜日
  24. 24. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 2.npm search yeoman-generator で generator を探せる 3.generator-foobar は Yeoman から generator として使える (yo foobar のようなコマンドで) 13年6月29日土曜日
  25. 25. generator いろいろ • generator-angular • generator-backbone • generator-ember • generator-jquery(jQueryプラグイン用) • generator-chrome-extension(extension作 る用) 13年6月29日土曜日
  26. 26. さらにいろいろ • generator-webapp(HTML5 Boilerplate, jQuery, Modernizr, RequireJS, CSS autoprefixerてんこもり) • generator-wordpress(対話的に入力するとWPに 必要なPHPファイル一式とテーマの骨組みまで用意してくれる) • generator-dotfiles(githubにdotfilesを公開) 13年6月29日土曜日
  27. 27. generator を使った scaffolding 13年6月29日土曜日
  28. 28. generator を使った scaffolding • 大まかな流れ 13年6月29日土曜日
  29. 29. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 13年6月29日土曜日
  30. 30. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 2.npm install -g yeoman-foobar 13年6月29日土曜日
  31. 31. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 2.npm install -g yeoman-foobar 3.yo foobar 13年6月29日土曜日
  32. 32. 簡単なscaffoldingのデモ 13年6月29日土曜日
  33. 33. ※動かなかったときのための保険用キャプチャ 13年6月29日土曜日
  34. 34. 13年6月29日土曜日
  35. 35. 13年6月29日土曜日
  36. 36. 13年6月29日土曜日
  37. 37. 13年6月29日土曜日
  38. 38. 13年6月29日土曜日
  39. 39. 13年6月29日土曜日
  40. 40. 13年6月29日土曜日
  41. 41. 13年6月29日土曜日
  42. 42. generator を使った scaffolding • 必要十分な足場としてのファイルが コマンド1つで用意される • generator が npm で公開できる 仕組み 13年6月29日土曜日
  43. 43. 勘違いしてたところ2 13年6月29日土曜日
  44. 44. 勘違いしてたところ2 • generatorは当然自分で作れる 13年6月29日土曜日
  45. 45. 勘違いしてたところ2 • generatorは当然自分で作れる • 気に入る generator が無くても 自分で作れる、npm に公開も可能 13年6月29日土曜日
  46. 46. 勘違いしてたところ2 • generatorは当然自分で作れる • 気に入る generator が無くても 自分で作れる、npm に公開も可能 • generatorを作るgenerator、 generator-generator がある 13年6月29日土曜日
  47. 47. generator-generator • npm install -g generator-generator 13年6月29日土曜日
  48. 48. generator-bauer を作る 13年6月29日土曜日
  49. 49. generator-bauer を作る • yo bauer って打つだけで 自分用のばうあーコマンドで scaffolding が・・・! 13年6月29日土曜日
  50. 50. generator-bauer を作る • 全部で4ステップ 1.同名のディレクトリを作る 2.generator-generator で生成して 必要に応じてカスタマイズ 3.リンク貼る 4.yo bauer 13年6月29日土曜日
  51. 51. generator-bauer(1) • mkdir generator-bauer • cd generator-bauer/ • ※後でnpm としてシンボリックリン ク貼るので、ディレクトリは同じ名前 にする 13年6月29日土曜日
  52. 52. generator-bauer(2) • yo generator => generator 用のファイル一式 • package.json, app/index.js あたりが npm の中心的なファイル • もちろんそのまま動くし、 app/index.js を修正すれば挙動変わる 13年6月29日土曜日
  53. 53. generator-bauer(3) • npm link • 自分の場合、/usr/local/share/npm/ lib/node_modules/generator-bauer にシンボリックリンク貼られる • node のモジュールのパスが通る 13年6月29日土曜日
  54. 54. generator-bauer(4) • (別の場所で) mkdir bauer && cd bauer/ ディレクトリ名は違ってもOK • yo bauer => generator-bauer のファイル一式 が出来る 13年6月29日土曜日
  55. 55. まとめ • Yeoman はフロントエンドのツール じゃなくてインフラだった しかも汎用性高い • generator の公開までしなくても、 npm link でリンク貼って yo foobar とかで動かすような、 自作 generator の方法もお手軽 • ちょっと使ってみる気になったかも 13年6月29日土曜日
  56. 56. 参考URL • Yeoman http://yeoman.io/ http://yeoman.io/generators.html 下は generator-generator の説明 • Grunt http://gruntjs.com/ • bower http://bower.io/ • WEBアプリケーションビルド・ テストツール YEOMAN http://www.slideshare.net/kamiyam/ss-15731663 • [日本語訳]Yeoman App Generatorsの書き方 http://qiita.com/sys1yagi/items/da002b32b6663faaa705 13年6月29日土曜日
  57. 57. 参考URL • Yeoman generator path/naming issue with npm link when gen dir is not "generator-_____" https://github.com/yeoman/yeoman/issues/1075 ※ディレクトリ名が generator-_____じゃない時に動かない • EditorConfig http://editorconfig.org/ • EditorConfig でエディタの設定も共有しよう http://dev.hageee.net/21 日本語だといちばんまとまってた 13年6月29日土曜日

×