yeoman ハンズオン in 21 cafe
TRANSCRIPT
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 コマンド
$ 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