yeoman ハンズオン in 21 cafe

Yeoman ハンズオン

アジェンダ

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

Name: !

佐川　夫美雄 @albatrosary

http://albatrosary.hateblo.jp/

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

Yeoman を使うための事前準備

http://yeoman.io/ !

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

Yeoman

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

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

Yeoman

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

Yeoman とは

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

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

Yeomanは !

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

!

を合わせた総合ツール

http://yeoman.io/

Yeoman はここから

開発の大まかな流れ

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

Yeoman のインストール

$ npm install -g yo

yo とは

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

generator はどのくらいある？

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

genetator の取得

$ npm install -g generator-webapp

yo コマンド

$ yo webapp

bower とは

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

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

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

例えば backbone を入れてみる

$ bower install backbone

$ bower install backbone --save

grunt とは

タスクランナーです

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

http://gruntjs.com/plugins

grunt コマンド

$ grunt server

$ grunt build

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

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