2013年5月18日土曜日

Yeomanを使って簡単に今っぽいHTML5Webアプリケーション環境を構築

このエントリーをはてなブックマークに追加 はてなブックマーク - Yeomanを使って簡単に今っぽいHTML5Webアプリケーション環境を構築

Yeoman使えばGrunt,bowerも入るよっ!
YouTubeでChrome+HTML5 Developers Live Japan #4をたまたま見たら、Yeomanを使うとWeb開発で色々便利!という事を知り、早速導入。
なお、上記動画のスライドはつかってみよう!Yeoman。HTML5Webアプリケーション開発を効率化するツールの紹介にありましたが、とても分かりやすいです!
具体的にはYomanは大きく分けて以下によって構成されています。
  • Yo→Scaffold。npmでインストールしたテンプレートに従って、ディレクトリとか最低限必要なファイル群を構成してくれる。
  • Grunt→Build及びタスク実行。CoffeeScript、ビルドしたり、テスト実行したり、特定ファイルの変更監視して、ページの自動ロードしたり。すごいみたい。
  • Bower→HTML、CSS、JavaScript用のパッケージマネージャ。これを使ってjQueryとかBackboneとかのバージョン管理とか出来るみたいで便利そう。
実はどれもしっかり使った事がなくて、説明が曖昧ですいません。。。
個人的にYeomanに惹かれたポイントは以下です。
  • yoというコマンドがなんか良い。
  • インストールが楽。
  • Webアプリケーション構築時にTwitter Bootstrap for SassをYes/Noでインストールできる。
  • GruntでのLiveReloadやばい(ファイル保存でブラウザも自動更新される)
  • Gruntの設定ファイル作成面倒そうだけど、とりあえず動く奴作ってくれる。
  • Webアプリ作成時のテンプレートでBackboneとかAngularとかある。

1.準備

rubyのインストール

私は入っていたので除外。 rvmを利用してバージョン管理しています。 ちなみに1.9.2を利用。

nodeのインストール

最近はnodebrewが良さげみたいですが、僕はnvmインストールしてたのでそれで。0.8より新しいバージョンのnode必要のようです。
nvm ls-remote
nvm install v0.10.11
nvm use v0.10.11
★2013年6月16日修正
node v0.11はbowerのサポートをしていないみたいで、利用するnodeバージョンをnode v0.10に変更しました。

Compassのインストール

何かでインストールしてたので除外。 gemコマンドでもインストール出来るようです。 ちなみに0.12.2を利用。

Gruntのインストール

gruntをインストールしてないとgrunt-cliは動かないみたいなのでインストール。(細かく検証してませんが、必要ないかもしれません。ただ、インストールしてても問題ないはずです。)なお、gruntのバージョンは3.0より新しくする必要があるみたいです。
npm install -g grunt

2.インストール

Yeomanをnpmを利用してインストールします。 コマンドは公式サイトそのままで。
npm install -g yo grunt-cli bower
終わり!

3.テンプレートをダウンロード

利用するテンプレートファイルをnpmでインストールします。
npm search yeoman-generator
ずらーと出てきます。まだ試してないですが、generator-backbonegenerator-angularとかもあって、だいたい30、40個ぐらいあるみたい.。。
とりあえず標準テンプレートのwebappをインストールします。
npm install -g generator-webapp

4.Webアプリ作成

mkdir testyeoman
cd testyeoman
yo webapp


     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] Would you like to include Twitter Bootstrap for Sass? (Y/n) 
おっさん(Yeoman)きた!Twitter Bootstrap使いたいのでYes。
[?] Would you like to include RequireJS (for AMD support)? (Y/n) 
RequireJSもインストールしたいのでYes。
とすると色々ダウンロードが始まります。(結構時間掛かります。) 私はXcodeインストールしながらやったらPhantomJSのインストールで時間がすごく掛かりました。辛抱強く待ちましょう。。。 なお、インストール途中でキャンセルすると通信途中の壊れたZIPファイルが残って、以降再ダウンロードしてもエラーになりますので、その場合には上記ZIPファイルを削除してからやりましょう。
toshihiro308@Toshihirock-MacBook-Air:~/yeomantest$ ll
drwxr-xr-x  15 toshihiro308  staff    510  5 18 06:47 .
drwxr-xr-x+ 94 toshihiro308  staff   3196  5 17 22:31 ..
-rw-r--r--   1 toshihiro308  staff     44  5 17 22:31 .bowerrc
-rw-r--r--   1 toshihiro308  staff    415  5 17 22:31 .editorconfig
-rw-r--r--   1 toshihiro308  staff     11  5 17 22:31 .gitattributes
-rw-r--r--   1 toshihiro308  staff     56  5 17 22:31 .gitignore
-rw-r--r--   1 toshihiro308  staff    408  5 17 22:31 .jshintrc
drwxr-xr-x   4 toshihiro308  staff    136  5 18 00:15 .sass-cache
drwxr-xr-x   4 toshihiro308  staff    136  5 18 06:47 .tmp
-rw-r--r--   1 toshihiro308  staff  11002  5 17 22:31 Gruntfile.js
drwxr-xr-x  11 toshihiro308  staff    374  5 17 22:31 app
-rw-r--r--   1 toshihiro308  staff    208  5 17 22:31 bower.json
drwxr-xr-x  27 toshihiro308  staff    918  5 17 22:31 node_modules
-rw-r--r--   1 toshihiro308  staff    941  5 17 22:31 package.json
drwxr-xr-x   5 toshihiro308  staff    170  5 17 22:31 test
色々出来ています。 とりあえず起動っ!
grunt server
ブラウザが起動し、以下の画面が表示されます。

HTML5 Boilerplate,Twitter Bootstrap,RequireJSがインストールされてますよと!
bowerで確認するとこんな感じでした。
toshihiro308@Toshihirock-MacBook-Air:~/yeomantest$ bower list
bower discover Please wait while newer package versions are being discovered
yeomantest
├── jquery#1.9.1 (2.0.0 now available)
├── modernizr#2.6.2
├── requirejs#2.1.6
└─┬ sass-bootstrap#2.3.1
  └── jquery#1.9.1 (2.0.0 now available)
おお、超便利!。分かりやすい!

5.編集とか

先ほどのディレクトリのapp/index.htmlが表示されたページなので、これを編集したり、別途ファイルを作成したりして構築を行っていきます。

6.まとめ

上記の通り、ディレクトリ構成及びファイルが良い感じに配置されて、対応するようにGruntfileも作成されるのってのが良いですね。とりあえず、これでえいと環境つくってカスタマイズしていくと良さげ。

LiveReload機能がうまく動かなかったので別途調査予定。

2013年5月20日追記
LiveReload機能が動かないのはブラウザにLiveReload用のエクステンションをインストールしてなかったからでした。Chromeでエクステンションインストールしてやったらしっかり動きました。

0 件のコメント:

コメントを投稿