albatrosary's blog

UI/UXとエンタープライズシステム

Yeoman を使った backbone.js の環境構築

Yeoman backbone

Yeoman を使って backbone.js を利用するためのジェネレータ（generator-backbone）をインストールします。結論から言うと generator-backbone を yo コマンド実行後 grunt server で起動すると「components ディレクトリが無い」というようなエラーが発生します。これを解消する方法が今回の主です。この内容は、html5ハンズオンで mvc フレームワークの評価をする予定だったのですがやることを変更しました。

 

具体的なエラーの内容を記載します。

$ grunt server

・・・

Running "compass:server" (compass) task
Errno::ENOENT on line ["33"] of /opt/local/lib/ruby1.9/gems/1.9.1/gems/compass-0.12.2/lib/compass/exec/global_options_parser.rb: No such file or directory - /Users/albatrosary/work/backbone-app/app/components
Run with --trace to see the full backtrace
Warning: Task "compass:server" failed. Use --force to continue.

このエラーを解消させ開発を進められるようにしたいと思います。もしかすると yeoman.io のサイトに何か記載があるかもしれませんが。。

 

ジェネレータ（generator-backbone）のインストール

ジェネレータ（generator-backbone）を npm コマンドにより yo がインストールされている node_modules へインストールします。

$ sudo su - root
$ cd /usr/local/lib/node_modules/yo
$ npm install generator-backbone

これでインストール完了です。中身は以下の通りです。
# ls -la
total 96
drwxr-xr-x  22 root    wheel   748 Jun  1 14:38 .
drwxr-xr-x  12 nobody  staff   408 Jun  1 14:38 ..
-rw-r--r--   1 root    wheel   207 Apr 16 21:42 .editorconfig
-rw-r--r--   1 root    wheel    12 Nov 27  2012 .gitattributes
-rw-r--r--   1 root    wheel   482 May  9 03:23 .jshintrc
-rw-r--r--   1 root    wheel    19 Mar 12 04:13 .npmignore
-rw-r--r--   1 root    wheel    16 Nov 30  2012 .nvmrc
-rw-r--r--   1 root    wheel    48 Apr 16 21:42 .travis.yml
-rw-r--r--   1 root    wheel   329 May  9 03:31 CHANGELOG
drwxr-xr-x   3 root    wheel   102 May  4 04:12 all
drwxr-xr-x   4 root    wheel   136 Jun  1 14:38 app
drwxr-xr-x   3 root    wheel   102 Apr 18 21:21 collection
-rw-r--r--   1 root    wheel    90 Nov 27  2012 contributing.md
drwxr-xr-x   3 root    wheel   102 Apr 22 03:58 model
-rw-r--r--   1 root    wheel  2932 Jun  1 14:38 package.json
-rw-r--r--   1 root    wheel  1957 Apr 21 02:43 readme.md
drwxr-xr-x   3 root    wheel   102 Apr 16 21:42 router
-rw-r--r--   1 root    wheel  2207 May  4 04:12 script-base.js
drwxr-xr-x   9 root    wheel   306 Jun  1 14:38 templates
drwxr-xr-x   6 root    wheel   204 Jun  1 14:38 test
-rw-r--r--   1 root    wheel  1265 Apr 15 21:15 util.js
drwxr-xr-x   3 root    wheel   102 Apr 22 05:45 view
#

yo コマンドによるひな形の作成および grunt

次に yo コマンドを使ってテンプレートを生成します。

$ yo backbone

エラーも無く終了し

$ ls -la
total 80
drwxr-xr-x  15 albatrosary  staff   510  6  1 14:41 .
drwxr-xr-x   6 albatrosary  staff   204  6  1 13:45 ..
-rw-r--r--   1 albatrosary  staff    44  6  1 13:56 .bowerrc
-rw-r--r--   1 albatrosary  staff   415  6  1 13:56 .editorconfig
-rw-r--r--   1 albatrosary  staff    11  6  1 13:45 .gitattributes
-rw-r--r--   1 albatrosary  staff    62  6  1 13:45 .gitignore
-rw-r--r--   1 albatrosary  staff   408  6  1 13:56 .jshintrc
drwxr-xr-x   4 albatrosary  staff   136  6  1 14:02 .sass-cache
drwxr-xr-x   4 albatrosary  staff   136  6  1 14:02 .tmp
-rw-r--r--   1 albatrosary  staff  9805  6  1 14:41 Gruntfile.js
drwxr-xr-x  10 albatrosary  staff   340  6  1 14:41 app
-rw-r--r--   1 albatrosary  staff   304  6  1 14:41 bower.json
drwxr-xr-x  25 albatrosary  staff   850  6  1 14:41 node_modules
-rw-r--r--   1 albatrosary  staff   874  6  1 14:41 package.json
drwxr-xr-x   5 albatrosary  staff   170  6  1 14:41 test
$

アプリケーションのひな形が生成されましたので起動します。

$ grunt server
Running "server" task

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "coffee:dist" (coffee) task

Running "createDefaultTemplate" task

Running "jst:compile" (jst) task
>> Destination not written because compiled files were empty.

Running "compass:server" (compass) task
Errno::ENOENT on line ["33"] of /opt/local/lib/ruby1.9/gems/1.9.1/gems/compass-0.12.2/lib/compass/exec/global_options_parser.rb: No such file or directory - /Users/albatrosary/work/backbone-app/app/bower_components
Run with --trace to see the full backtrace
Warning: Task "compass:server" failed. Use --force to continue.

Aborted due to warnings.
$

bower_components が無いと・・・。

$ ls -l
total 48
-rw-r--r--  1 albatrosary  staff  4464  6  1 14:41 404.html
-rw-r--r--  1 albatrosary  staff  6774  6  1 14:41 favicon.ico
drwxr-xr-x  2 albatrosary  staff    68  6  1 14:41 images
-rw-r--r--  1 albatrosary  staff  2334  6  1 14:41 index.html
-rw-r--r--  1 albatrosary  staff    31  6  1 14:41 robots.txt
drwxr-xr-x  4 albatrosary  staff   136  6  1 14:41 scripts
drwxr-xr-x  3 albatrosary  staff   102  6  1 14:41 styles
$

ジェネレータのディレクトリに _component.json ではなく _bower.json となっていたため bower が処理出来ずエラーが発生したのかと考え次の方針を立てました。（本来ならきちんと rb を読み対応すべきです）

  1. ファイル名を _bower.json から  _component.json へ変更する
  2. _bower.json を bower.json にファイル名を変えひな形へコピーしている部分を修正する

_bower.json から  _component.json へ変更

では初めにファイル名を変更します。これは次の通りです。

# pwd
/usr/local/lib/node_modules/yo/node_modules/generator-backbone/app/templates
# mv _bower.json _component.json

 

設定ファイル内で _bower.json から  _component.json へ変更

これは index.js を編集します

# pwd
/usr/local/lib/node_modules/yo/node_modules/generator-backbone/app
# vi index.js
・・・
Generator.prototype.bower = function bower() {
  this.copy('bowerrc', '.bowerrc');
  this.copy('_bower.json', 'bower.json');
};
・・・

を

Generator.prototype.bower = function bower() {
  this.copy('bowerrc', '.bowerrc');
  this.copy('_component.json', 'component.json');
};

これで再び yo コマンドからやり直します。

$ yo backbone
・・・
$ ls -l
total 48
-rw-r--r--  1 albatrosary  staff  4464  6  1 15:22 404.html
drwxr-xr-x  9 albatrosary  staff   306  6  1 15:22 bower_components
-rw-r--r--  1 albatrosary  staff  6774  6  1 15:22 favicon.ico
drwxr-xr-x  2 albatrosary  staff    68  6  1 15:22 images
-rw-r--r--  1 albatrosary  staff  2334  6  1 15:22 index.html
-rw-r--r--  1 albatrosary  staff    31  6  1 15:22 robots.txt
drwxr-xr-x  4 albatrosary  staff   136  6  1 15:22 scripts
drwxr-xr-x  3 albatrosary  staff   102  6  1 15:22 styles
$

今回は生成されてます。

$ grunt server

f:id:albatrosary:20130601153129p:plain

用いたジェネレータが旧バージョンのものかもしれません。修正方法として正しいか不明なので色々調べる必要があります。今回は grunt server を起動させただけですので。Yeoman 1.0 になってからコマンド系も変更されてますので要調査とします。

 

追記

記載後指摘があったのですが bower.json は「古い」ということはないようです。確かに bower のサイトにも書いてあります。再度調べ直す必要があるようです。。

bower ですが「 http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308 」

にとても分かりやすくまとめられていました。こちらを参照するといいと思います。

ちょっと話がズレますが component という bower と同様の機能をもったツールが有ります。下記を参照ください。

https://github.com/component/component

 

修正方法ですが bower のサイトによると .bowerrc で

{
  "directory": "bower_components",
  "endpoint": "https://bower.mycompany.com",
  "json": "bower.json",
  "searchpath": [
    "https://bower.herokuapp.com"
  ],
  "shorthand_resolver": "git://example.com/{{{ organization }}}/{{{ package }}}.git"
}

というような定義があります。"json": "bower.json" を記載することで正常に動作しました。具体的には

{
    "directory": "app/bower_components",
    "json": "bower.json"
}