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
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
とりあえず標準テンプレートの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)
[?] Would you like to include RequireJS (for AMD support)? (Y/n)
とすると色々ダウンロードが始まります。（結構時間掛かります。） 私は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 件のコメント:
コメントを投稿