Recommended
More Related Content
More from girigiribauer
Recently uploaded
Recently uploaded (9)
フロントエンドのツール Yeoman を勘違いしていた
- 4. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや 13年6月29日土曜日
- 5. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや • 仕事でフロントエンド的なこと 13年6月29日土曜日
- 6. 自己紹介 • ぎりぎりばうあー @girigiribauer • なごや • 仕事でフロントエンド的なこと • 2013年6月、無職してみました 13年6月29日土曜日
- 9. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた 13年6月29日土曜日
- 10. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた • Gruntと連携するのは知ってたけど、Grunt だけでいいんじゃないの？と思っていた 13年6月29日土曜日
- 11. 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた • Gruntと連携するのは知ってたけど、Grunt だけでいいんじゃないの？と思っていた • ただ特定のファイル群を最初に用意してくれ るだけ（scaffolding）だと思っていた 13年6月29日土曜日
- 13. Yeomanの前に • 事前知識をさらっと • Node.js（略） • npm • Grunt • bower 13年6月29日土曜日
- 14. npm: Node Package Manager • Perlの cpan, Rubyの gem に相当 • Node.js のパッケージ管理 • 開発ツールとしてもよく使う • npm install -g foobar で グローバルにインストール （-g なしでプロジェクトごと） 13年6月29日土曜日
- 15. Grunt: JavaScript Task Runner • lintしたりビルド走らせたり テスト走らせたり • 最小化したり単一ファイル化したり 画像のスプライト化したり • npmで grunt-foobar みたいなのが 大量に公開されてる 13年6月29日土曜日
- 16. bower: A package manager for the web • npm install -g bower で入れて さらにその上で動く • HTML / CSS / JavaScript 中心の パッケージ管理 • bower install foobar • 名前が気に入ってる 13年6月29日土曜日
- 18. Yeoman ちなみに今 Yeoman 1.0(beta)ですが、 1.0 より前の仕様は全然知りません 13年6月29日土曜日
- 19. 13年6月29日土曜日
- 20. インストールなど • node, npmが入っている前提で • npm install -g yo grunt-cli bower • Yeoman (yo) • Grunt (grunt-cli) • bower 13年6月29日土曜日
- 22. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 13年6月29日土曜日
- 23. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 2.npm search yeoman-generator で generator を探せる 13年6月29日土曜日
- 24. 勘違いしてたところ1 1.npm で generator (scaffolding) が 公開されてる 2.npm search yeoman-generator で generator を探せる 3.generator-foobar は Yeoman から generator として使える (yo foobar のようなコマンドで) 13年6月29日土曜日
- 25. generator いろいろ • generator-angular • generator-backbone • generator-ember • generator-jquery（jQueryプラグイン用） • generator-chrome-extension（extension作 る用） 13年6月29日土曜日
- 26. さらにいろいろ • generator-webapp（HTML5 Boilerplate, jQuery, Modernizr, RequireJS, CSS autoprefixerてんこもり） • generator-wordpress（対話的に入力するとWPに 必要なPHPファイル一式とテーマの骨組みまで用意してくれる） • generator-dotfiles（githubにdotfilesを公開） 13年6月29日土曜日
- 29. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 13年6月29日土曜日
- 30. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 2.npm install -g yeoman-foobar 13年6月29日土曜日
- 31. generator を使った scaffolding • 大まかな流れ 1.npm search yeoman-generator 2.npm install -g yeoman-foobar 3.yo foobar 13年6月29日土曜日
- 34. 13年6月29日土曜日
- 35. 13年6月29日土曜日
- 36. 13年6月29日土曜日
- 37. 13年6月29日土曜日
- 38. 13年6月29日土曜日
- 39. 13年6月29日土曜日
- 40. 13年6月29日土曜日
- 41. 13年6月29日土曜日
- 42. generator を使った scaffolding • 必要十分な足場としてのファイルが コマンド1つで用意される • generator が npm で公開できる 仕組み 13年6月29日土曜日
- 45. 勘違いしてたところ2 • generatorは当然自分で作れる • 気に入る generator が無くても 自分で作れる、npm に公開も可能 13年6月29日土曜日
- 46. 勘違いしてたところ2 • generatorは当然自分で作れる • 気に入る generator が無くても 自分で作れる、npm に公開も可能 • generatorを作るgenerator、 generator-generator がある 13年6月29日土曜日
- 47. generator-generator • npm install -g generator-generator 13年6月29日土曜日
- 49. generator-bauer を作る • yo bauer って打つだけで 自分用のばうあーコマンドで scaffolding が・・・！ 13年6月29日土曜日
- 50. generator-bauer を作る • 全部で4ステップ 1.同名のディレクトリを作る 2.generator-generator で生成して 必要に応じてカスタマイズ 3.リンク貼る 4.yo bauer 13年6月29日土曜日
- 51. generator-bauer(1) • mkdir generator-bauer • cd generator-bauer/ • ※後でnpm としてシンボリックリン ク貼るので、ディレクトリは同じ名前 にする 13年6月29日土曜日
- 52. generator-bauer(2) • yo generator => generator 用のファイル一式 • package.json, app/index.js あたりが npm の中心的なファイル • もちろんそのまま動くし、 app/index.js を修正すれば挙動変わる 13年6月29日土曜日
- 53. generator-bauer(3) • npm link • 自分の場合、/usr/local/share/npm/ lib/node_modules/generator-bauer にシンボリックリンク貼られる • node のモジュールのパスが通る 13年6月29日土曜日
- 54. generator-bauer(4) • （別の場所で） mkdir bauer && cd bauer/ ディレクトリ名は違ってもOK • yo bauer => generator-bauer のファイル一式 が出来る 13年6月29日土曜日
- 55. まとめ • Yeoman はフロントエンドのツール じゃなくてインフラだった しかも汎用性高い • generator の公開までしなくても、 npm link でリンク貼って yo foobar とかで動かすような、 自作 generator の方法もお手軽 • ちょっと使ってみる気になったかも 13年6月29日土曜日
- 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. 参考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日土曜日