yeoman+grunt+bowerでangularjs+bootstrap+sass環境構築

AWSのEC2インスタンス上でタイトルの環境を構築した際のメモ（自分用）。

以下参照したものをざっと挙げておく

nodejs+npm
- Installing Node and npm
- node-and-npm-in-30-seconds-sh
yoeman

立ち上げたばかりのEC2インスタンスを想定して話をする。

nodejs+npmの環境構築

makeとg++を使えるようにする
- % sudo yum install gcc gcc-c++
node-and-npm-in-30-seconds-shにある通りに実行していく
- PATHに関しては既に通っているようであれば省略可

チェックする

% node -v
v0.10.28
% npm -v
1.4.13

インストール出来ていればコマンドが使えるようになってる

インストール後、% npm search gruntと叩いたら、以下のようなエラーが出た

FATAL ERROR: JS Allocation failed - process out of memory

これに関しては、今回の場合は最弱のEC2インスタンスを使っていたため、純粋にメモリが足りなかったためだと思われる。

ハードウェアのパフォーマンスが十分な場合、以下を参考にすると解決するかも

node-js-fatal-error-js-allocation-failed-process-out-of-memory-possible

yeoman+grunt+bowerの環境構築

yeoman+grunt+bowerをインストール
- % npm install -g grunt-cli grunt yo
- bowerはyoのインストール時に自動でインストールされる
angularjs用のyeoman generatorをインストール
- % npm install -g generator-angular
プロジェクト用フォルダの作成
- % mkdir ${PROJECT_NAME} && cd ${PROJECT_NEME}
- yeomanは自動でプロジェクト用ディレクトリを作成してくれない
プロジェクトの作成
- % yo angular ${PROJECT_NAME}

ひとまずここまでで、プロジェクトの生成までは出来た。

これ以降の事は次の記事が参考になる。

Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築

2014.06.01 追記

% grunt で出るエラーへの対処について

compassが入ってない時

Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.

以下対処法

%gem update --system
%gem install compass
%npm install grunt-contrib-compass --save-dev

karma-jasmineが入っていない時

Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine) Use --force to continue.

以下対処法

% npm install karma-jasmine --save-dev

EC2インスタンス上での`% grunt serve`の起動に関して

まず、EC2の設定で9000番ポートをあける(yeomanデフォルトで9000番が生成されるため)。

f:id:ryufloat:20140601175435p:plain

次にGruntfile.jsをいじる

connect: {$
    options: {$
    port: 9000,$
   // Change this to '0.0.0.0' to access the server from outside.$
   hostname: '*',$
   livereload: 35729$
},

hostnameに'*'または0.0.0.0を設定

最後に、ブラウザで、{Elastic IP}:9000で確認。