yeoman, grunt, bowerで静的サイト構築（第三回）

grunt bower yeoman ruby rbenv

yeoman, grunt, bowerで静的サイト構築（第二回）の続き

前回は yo mobile でプロジェクトの雛形を構築するところまでやりました。

compass関連のタスクを実行するため、ruby及びrbenv-gemsetの環境を構築する必要があり、動作確認までできておりませんでしたので、今回の内容は下記になります。

  • rbenv, ruby-buildでrubyをインストール
  • rbenv-gemsetでgemの管理
  • yo mobile で構築したプロジェクトの疎通確認

rbenvでrubyをインストール

前回のnvm同様、システム全体で共通に利用できるようにrbenvのインストールを行いたいので、/usr/local/rbenvにcloneします。

$ git clone git://github.com/sstephenson/rbenv.git /usr/local/rbenv

rbenv installを実行できるようにするために、ruby-buildを/usr/local/rbenv/plugins/にcloneします。

$ git clone git://github.com/sstephenson/ruby-build.git /usr/local/rbenv/plugins/ruby-build

$ /usr/local/rbenv/plugins/ruby-build/install.sh

以上でrbenv, ruby-buildのインストールは完了です。

nvm同様、ログイン時にrbenvを利用できるようにします。

$ vi /etc/profie.d/rbenv.sh

export RBENV_ROOT="/usr/local/rbenv"
export PATH="${RBENV_ROOT}/bin:${PATH}"
eval "$(rbenv init -)"

rubyをインストールする前に、利用可能なバージョンを確認します。

$ rbenv install -l

インストールしたいバージョンを指定して、インストールを実行します。

※インストールに数分かかります。

$ rbenv install 2.0.0-p353

$ rbenv rehash

以上でインストール完了です。

他のバージョンも同様の方法でインストールすることができ、自由にバージョンを切り替えることができます。

  • 一時的にバージョンを切り替えたい場合

$ rbenv shell XXX

  • ディレクトリ配下のバージョンを指定する場合

$ rbenv local XXX

  • システムのデフォルトのバージョンを指定する場合

$ rbenv global XXX

rbenv-gemsetでgemの管理

rbenv gemsetを実行できるようにするために、ruby-gemsetを/usr/local/rbenv/plugins/にcloneします。

$ git clone git://github.com/jf/rbenv-gemset.git /usr/local/rbenv/plugins/rbenv-gemset

gemsetを作成します。

rubyのバージョン及びgemsetの名前（今回はhoge）を指定します。

$ rbenv gemset create 2.0.0-p353 hoge

第二回で作成したプロジェクト配下（/app/dev/mobile）で利用するgemsetを指定するために、/app/dev/mobile/.rbenv-gemsetsにhogeを定義します。

$ echo hoge > /app/dev/mobile/.rbenv-gemsets

また、同様にプロジェクト配下（/app/dev/mobile）で利用するrubyのバージョンを指定するために、/app/dev/mobile/.ruby-versionに2.0.0-p353を定義します。

$ echo 2.0.0-p353 > /app/dev/mobile/.ruby-version

次にcompassをインストールします。

デフォルトでgemが設定されているので、アンインストールして、bundlerで管理するのが一番良いのでしょうが、AWSのamazon linuxを利用して環境を構築したところ、アンインストールに失敗する現象が解決できずに断念しました。

ERROR:  While executing gem ... (Gem::InstallError)
    gem "bigdecimal" cannot be uninstalled because it is a default gem

すみませんが、普通にインストールします。

$ gem install compass --no-ri --no-rdoc

以上で環境構築は完了です。

yo mobile で構築したプロジェクトの疎通確認

とりあえず起動します。

$ grunt server

Running "server" task

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

Running "concurrent:server" (concurrent) task
    
    Running "coffee:dist" (coffee) task
    File .tmp/scripts/hello.js created.
    
    Done, without errors.
        
    Running "compass:server" (compass) task
    
    Done, without errors.
    
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.

Running "open:server" (open) task
Warning: Command failed: /app/dev/test/node_modules/grunt-open/node_modules/open/vendor/xdg-open: line 584: xdg-mime: command not found
xdg-open: no method available for opening 'http://localhost:9000'
 Use --force to continue.

Aborted due to warnings.

open:serverのタスク実行でエラーになりました。

xdg-mimeのコマンドが見つからないようです。

xdg-openはデスクトップ用のモジュールのようなので、今回はタスクを除外します。

$ vi Gruntfile.js

open:serverをとりあえずコメントアウトしてください。

389     grunt.registerTask('server', function (target) {
390         if (target === 'dist') {
391             return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
392         }
393 
394         grunt.task.run([
395             'clean:server',
396             'concurrent:server',
397             'connect:livereload',
398 //            'open:server',
399             'watch'
400         ]);
401     });

ついでにのconnect.options.hostnameも指定しておきましょう。

デフォルトはlocalhostが設定されているため、Macなどの個人PCで環境構築する場合はそのままでもOKですが、AWSなどを利用している場合はこのままではブラウザから動作確認することができないので設定は必須です。設定しなくてもwgetなどでリクエストを投げれはしますが。

 79         connect: {
 80             options: {
 81                 port: 9000,
 82                 // change this to '0.0.0.0' to access the server from outside
 83                 //hostname: 'localhost'
 84                 hostname: '0.0.0.0'
 85             },
 85             livereload: {
 86                 options: {
 87                     middleware: function (connect) {
 88                         return [
 89                             lrSnippet,
 90                             mountFolder(connect, '.tmp'),
 91                             mountFolder(connect, yeomanConfig.app)
 92                         ];
 93                     }
 94                 }
 95             },

もう一度実行します。

$ grunt server

Running "server" task

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

Running "concurrent:server" (concurrent) task
    
    Running "coffee:dist" (coffee) task
    File .tmp/scripts/hello.js created.
    
    Done, without errors.
        
    Running "compass:server" (compass) task
    
    Done, without errors.
    
Running "connect:livereload" (connect) task
Starting connect web server on 0.0.0.0:9000.

Running "watch" task
Waiting...

serverタスクとして登録されてるタスクが完了しました。

ブラウザからポート番号9000を指定して画面が表示されれば成功です。

以上で初期の環境構築は完了です。

実行された各タスクを簡単に説明すると、

  • clean:server

.tmpのディレクトリを削除（）

  • concurrent:server

coffee:dist, compass:server を並列処理

  • coffee:server

coffeeスクリプトをjsにコンパイル（/app/dev/mobile/.tmp/にコンパイルされたファイルが作成されます）

  • compass:server

sassをcssにコンパイルなど（/app/dev/mobile/.tmp/にコンパイルされたファイルが作成されます）

  • connect:livereload

livereloadを設定してポート番号9000でLISTEN（開発用）

.tmp下にファイルが作成されるのに、なぜブラウザから閲覧できるのかと思った方もいると思います。

connect.livereload.options.middlewareのmountFolderの設定があるためです。

.tmp/のファイルが、app/のファイルよりも優先されて利用されるようになっています。

コンパイルされたファイルは.tmpに作成するように設定されており、grunt serverで起動した際には.tmpの全ファイルを削除し、リコンパイルする設計になっています。

[次回以降の記載予定内容]

  • bowerについてもう少し詳しく

  • Gruntfile.jsをファイル分割

  • assemble, handlebars.js

  • 各種モジュールの説明