22
Yeoman ハンズオン

Yeoman ハンズオン in 21 Cafe

Embed Size (px)

Citation preview

Page 1: Yeoman ハンズオン in 21 Cafe

Yeoman ハンズオン

Page 2: Yeoman ハンズオン in 21 Cafe

アジェンダ

1.Yeoman 概要 2.yo を触ってみる 3.bower を触ってみる 4.generator を作ってみる

Page 3: Yeoman ハンズオン in 21 Cafe

Name: !

佐川 夫美雄 @albatrosary

http://albatrosary.hateblo.jp/

・html5jエンタープライズ部 副部長 ・OSC / ハンズオン 担当

Page 4: Yeoman ハンズオン in 21 Cafe

Yeoman を使うための事前準備

http://yeoman.io/ !

windows ユーザはこれも http://albatrosary.hateblo.jp/entry/2013/06/06/114116

Page 5: Yeoman ハンズオン in 21 Cafe

Yeoman

この資料は @yosuke_furukawa さんのブログ !

http://yosuke-furukawa.hatenablog.com/ !を元に作成しています。

Page 6: Yeoman ハンズオン in 21 Cafe

Yeoman

Yeoman入門(第一部、yoを使う) !http://yosuke-furukawa.hatenablog.com/entry/2013/07/04/085814

Page 7: Yeoman ハンズオン in 21 Cafe

Yeoman とは

Google社が作成した総合開発ツール群です

MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー)

Page 8: Yeoman ハンズオン in 21 Cafe

Yeomanは !

yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ)

!

を合わせた総合ツール

Page 9: Yeoman ハンズオン in 21 Cafe

http://yeoman.io/

Yeoman はここから

Page 10: Yeoman ハンズオン in 21 Cafe

開発の大まかな流れ

yo webapp によるひな形 grunt server を使用しアプリケーション開発 grunt build によるリリースビルド

Page 11: Yeoman ハンズオン in 21 Cafe

Yeoman のインストール

$ npm install -g yo

Page 12: Yeoman ハンズオン in 21 Cafe

yo とは

雛形作成ツール yeoman-generatorとも呼ばれます

Page 13: Yeoman ハンズオン in 21 Cafe

generator はどのくらいある?

http://yeoman.io/community-generators.html

Page 14: Yeoman ハンズオン in 21 Cafe

genetator の取得

$ npm install -g generator-webapp

Page 15: Yeoman ハンズオン in 21 Cafe

yo コマンド

$ yo webapp

Page 16: Yeoman ハンズオン in 21 Cafe

bower とは

Twitter社が作ったフロントエンド用のパッケージマネージャ

Page 17: Yeoman ハンズオン in 21 Cafe

bower components はどのくらいあるか?

http://sindresorhus.com/bower-components/

Page 18: Yeoman ハンズオン in 21 Cafe

例えば backbone を入れてみる

$ bower install backbone

$ bower install backbone --save

Page 19: Yeoman ハンズオン in 21 Cafe

grunt とは

タスクランナーです

Page 20: Yeoman ハンズオン in 21 Cafe

grunt で登録されているプラグインは

http://gruntjs.com/plugins

Page 21: Yeoman ハンズオン in 21 Cafe

grunt コマンド

$ grunt server

$ grunt build

Page 22: Yeoman ハンズオン in 21 Cafe

触ってみますBower入門(基礎編) !http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308

Yeoman入門(第二部、generatorを作る) !http://yosuke-furukawa.hatenablog.com/entry/2013/07/14/131903