読者です 読者をやめる 読者になる 読者になる

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

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


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


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

nodejs+npmの環境構築

  1. makeとg++を使えるようにする
    • % sudo yum install gcc gcc-c++
  2. 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の環境構築

  1. yeoman+grunt+bowerをインストール
    • % npm install -g grunt-cli grunt yo
    • bowerはyoのインストール時に自動でインストールされる
  2. angularjs用のyeoman generatorをインストール
    • % npm install -g generator-angular
  3. プロジェクト用フォルダの作成
    • % mkdir ${PROJECT_NAME} && cd ${PROJECT_NEME}
    • yeomanは自動でプロジェクト用ディレクトリを作成してくれない
  4. プロジェクトの作成
    • % 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で確認。