Yeoman RIAビルドツール超入門

YeomanRIAビルドツール超入門

第6回HTML5など勉強会2013.3.21

Bathtimefish 村岡 正和

自己紹介

Webアプリケーション開発　IT業務システム設計/開発Webサービス導入/事業戦略コンサルティング

HTML5-WEST.jp代表 / 京都GTUG / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など

むらおか　まさかず

村岡正和 @bathtimefish

http://html5-west.jp/

HTML5-WEST.jpHTML5 JavaScript中国拳法 Python 主夫になりたい

炊事 Google Apps

ブログはじめました。

http://bathtimefish.hatenablog.com/

スターつけてもらったりリツイートされたりすると結構うれしいもんですね :)

まずは余談から

昨日までのおはなし

いままでyeoman0.9をつかって仕事してきてます。

ほんで先日「そろそろスライドつくらなー」と思って本家みたら、、、

昨日までのおはなし

いつのまにか1.0 betaリリース

大幅に仕様かわっとる！

( .. ;)φ 再修行...

なんとか間に合いました

今日は1.0betaのお話です。

昨日までのおはなし

0.9以前つかってる人は migrate guideを読みましょう。

今日のおはなし

RIAとかイマドキっぽいWebサイト制作のときにいろいろメンドイことがあって、

今日のおはなし

それを自動化してくれるビルドツールつかったらいいんじゃね？

今日のおはなし

で、Yeomanがよくね？というおはなし。

Yoemanつかったことない人向けにカンタンな紹介をします。

おはなしの流れ

•制作でめんどうなこと•Yeomanの紹介•セットアップ•とりあえず使えるコマンド•実際に使ってみる•まとめ

つくりたいってなったら、

さっさと集中したい、

テキトーな準備で。

あったらいいなあ、でも下準備めんどいなあと思ういろいろ。

• ディレクトリ構成• ローカルWebサーバー• CoffeeとかSassとか使う場合のコンパイル設定• クロスプラットフォームなページのスケルトン。ベストプラクティスなやつ。

• 最適化、軽量化• いいかんじのライブラリとかプラグインさがすの

etc...

全部テキトーにやってくれる

だれが？

このオッサンが。

Yeoman

http://yeoman.io/

Yeoman’s service

デキるオッサン

い ざ と い う と き の 際 立 っ た 働 き

こんな人にモロに刺さります。

• 制作テンプレ持ってない。つーか作るのメンドイ• 最近JavaScript書いてない。Coffee依存症• 最適化・軽量化に細かいこだわりはない。いい感じにやってほしい

• Sass最高ヒャッハー！• もうCompassでいいです• もうBootstrapでいいです

こんなの

セットアップ

黒い画面で、

npm install -g yo grunt-cli bower

...と、そのまえに入れておくもの。

node.js (>=0.8.0)

ruby

compass

※ grunt0.3以前をインストールしている場合、アンインストールしておく。

Yeomanを構成するツール

•yo•bower•grunt

scaffolding project

package manager

task runner

Yo

•Yeomanのプロジェクトを生成する$ yo webappangular, backbone, ember, chromeapp...様々なフレームワークのscaffoldingが可能。HTML5 Boilerplate, Gruntfile.js, component.json, node_modulesの自動配置。

Bower

•JSライブラリのパッケージマネージャ$ bower install underscoreinstall, search, list, update...JSライブラリ、jQueryプラグインなどを検索してapp/componentsに自動インストール。既存ライブラリの管理に便利。

Grunt

•JSベースの作業自動化ツール$ grunt serverserver, build, test, clean...様々な作業を自動化、ローカルWebサーバー起動、ファイル更新監視、リリースビルド、テストetc...

制作時の中核的ツール。はっきりいって神！

実際につかってみる。

とりあえずコーディングはじめる前のじゅもん

yo webapp

npm install && bower install

grunt server

リリースの呪文

grunt build

or

grunt server:dist

RIA開発の作業効率がアップすると思います

ニーズがあるならそのうち勉強会やるかも。興味あったら教えてください。

happy����������� ������������������  coding.

Thanks.