• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
フロントエンドのツール Yeoman を勘違いしていた
 

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

on

  • 16,019 views

Yeoman を勘違いしてスルーしてたところもあったので、 ...

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

Statistics

Views

Total Views
16,019
Views on SlideShare
15,804
Embed Views
215

Actions

Likes
78
Downloads
0
Comments
0

8 Embeds 215

http://girigiribauer.com 92
https://twitter.com 85
http://girigiribauer.localhost 17
http://localhost 14
http://tweetedtimes.com 4
http://cloud.feedly.com 1
http://mym.corp.yahoo.co.jp 1
https://www.chatwork.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • フロントエンドのツール 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 だけでいいんじゃないの?と思っていた 13年6月29日土曜日
    • 勘違い • 初期のころに見せてもらった Yeoman の デモで、最初のコマンドを打つと 大量にファイルを読み込むのを見て、 勝手に「これ使えないなー」と判断してた • Gruntと連携するのは知ってたけど、Grunt だけでいいんじゃないの?と思っていた • ただ特定のファイル群を最初に用意してくれ るだけ(scaffolding)だと思っていた 13年6月29日土曜日
    • 間違ってた • 少し調べてみたら可能性を感じた ので、どんな風に使えそうか 調べてみたのを共有します • あまり時間とれなかったので 簡単な資料でごめんなさい・・・ 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 で グローバルにインストール (-g なしでプロジェクトごと) 13年6月29日土曜日
    • Grunt: JavaScript Task Runner • lintしたりビルド走らせたり テスト走らせたり • 最小化したり単一ファイル化したり 画像のスプライト化したり • npmで grunt-foobar みたいなのが 大量に公開されてる 13年6月29日土曜日
    • bower: A package manager for the web • npm install -g bower で入れて さらにその上で動く • HTML / CSS / JavaScript 中心の パッケージ管理 • bower install foobar • 名前が気に入ってる 13年6月29日土曜日
    • 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 は Yeoman から generator として使える (yo foobar のようなコマンドで) 13年6月29日土曜日
    • generator いろいろ • generator-angular • generator-backbone • generator-ember • generator-jquery(jQueryプラグイン用) • generator-chrome-extension(extension作 る用) 13年6月29日土曜日
    • さらにいろいろ • generator-webapp(HTML5 Boilerplate, jQuery, Modernizr, RequireJS, CSS autoprefixerてんこもり) • generator-wordpress(対話的に入力するとWPに 必要なPHPファイル一式とテーマの骨組みまで用意してくれる) • generator-dotfiles(githubにdotfilesを公開) 13年6月29日土曜日
    • 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 がある 13年6月29日土曜日
    • 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/index.js を修正すれば挙動変わる 13年6月29日土曜日
    • generator-bauer(3) • npm link • 自分の場合、/usr/local/share/npm/ lib/node_modules/generator-bauer にシンボリックリンク貼られる • node のモジュールのパスが通る 13年6月29日土曜日
    • generator-bauer(4) • (別の場所で) mkdir bauer && cd bauer/ ディレクトリ名は違ってもOK • yo bauer => generator-bauer のファイル一式 が出来る 13年6月29日土曜日
    • まとめ • Yeoman はフロントエンドのツール じゃなくてインフラだった しかも汎用性高い • generator の公開までしなくても、 npm link でリンク貼って yo foobar とかで動かすような、 自作 generator の方法もお手軽 • ちょっと使ってみる気になったかも 13年6月29日土曜日
    • 参考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日土曜日
    • 参考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日土曜日