Post on 15-Jan-2015
description
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
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.