カテゴリー: node.js

CentOS6環境にyeomanでAngularJSの雛形を作成するまで

AngularJSを開発するときに最初の準備が
面倒なのでyeomanでAngularJSの雛形を簡単
に準備するメモ。

以下の手順ではすんなり入っているようにみえますが、
nodeとかnpmとか久しぶりなのとVagrantのメモリが少なかった
とか色々あってかなり苦戦しました。
最終的に必要だった手順だけ載せます。

インストールはVagrantに作ったCentOS6.5。
ネットワークはpublic_networkでとりあえずDHCP。
インストール時のIPは192.168.1.222。
メモリは2GBに設定。

■nodejs,npmをepelからインストール

# rpm -ivh http://ftp-srv2.kddilabs.jp/Linux/distributions/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
# yum -y install nodejs npm --enablerepo=epel
# node --version
v0.10.33
# npm -v
1.3.6

■一応最新版を入れるためにnをいれて安定版を使う

# npm cache clean
# npm install -g n
# n stable
# node -v
v0.10.33
# npm -v
1.3.6

■以前インストールを試したときにエラーが出たのでnpmで一応以下のものも先に入れておく
※あとで面倒なのでグローバルインストール
ここの作業は本来いらないはず・・・？

# npm install -g coffee-script
# npm install -g phantom
# npm install -g grunt-contrib-imagemin
# npm install -g ws

■bower,grunt,gulp,yoをnpmでいれる
※あとで面倒なのでグローバルインストール

# npm install -g bower grunt-cli gulp yo

■AngularJS雛形用のジェネレータをインストール
※あとで面倒なのでグローバルインストール

# npm install -g generator-angular

■yeomanでAngularJSの雛形を作成する
※ここからは一般ユーザでおこなった。

$ mkdir test-angular　　<-適当にフォルダを作成
$ cd test-angular/
$ yo angular　　<-yoコマンドの実行

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y ` 

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? No　　<-Sassは自分は使わないのでNo
? Would you like to include Bootstrap? Yes　　<-Bootstrapは使うのでYes
? Which modules would you like to include?　　<-表示がよくわからないけど使うものを「◉」使わないものを「◯」に変更
 ◯ angular-animate.js
 ◯ angular-aria.js
 ◉ angular-cookies.js
 ◉ angular-resource.js
 ◯ angular-messages.js
 ◉ angular-route.js
 ◉ angular-sanitize.js
❯◯ angular-touch.js

・・・しばらく待つ・・・

Execution Time (2015-03-18 01:23:47 UTC)
loading tasks    6ms  ▇▇▇▇▇▇▇ 3%
wiredep:app    159ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 89%
wiredep:test    12ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 7%
Total 179ms

$ ll
total 76
drwxrwxr-x  6 vagrant vagrant  4096 Mar 18 01:21 ./
drwxrwxr-x  3 vagrant vagrant  4096 Mar 18 01:19 ../
drwxrwxr-x  6 vagrant vagrant  4096 Mar 18 01:20 app/
drwxrwxr-x 10 vagrant vagrant  4096 Mar 18 01:21 bower_components/
-rw-rw-r--  1 vagrant vagrant   371 Mar 18 01:20 bower.json
-rw-rw-r--  1 vagrant vagrant    38 Mar 18 01:20 .bowerrc
-rw-r--r--  1 vagrant vagrant   415 Feb 10 19:07 .editorconfig
-rw-r--r--  1 vagrant vagrant    11 Feb 10 19:07 .gitattributes
-rw-r--r--  1 vagrant vagrant    52 Feb 10 19:07 .gitignore
-rw-rw-r--  1 vagrant vagrant 10575 Mar 18 01:20 Gruntfile.js
-rw-r--r--  1 vagrant vagrant   376 Feb 10 19:07 .jshintrc
drwxrwxr-x 30 vagrant vagrant  4096 Mar 18 01:21 node_modules/
-rw-rw-r--  1 vagrant vagrant  1154 Mar 18 01:21 package.json
-rw-rw-r--  1 vagrant vagrant   282 Mar 18 01:20 README.md
drwxrwxr-x  3 vagrant vagrant  4096 Mar 18 01:20 test/
-rw-r--r--  1 vagrant vagrant   110 Feb  2 19:59 .travis.yml
-rw-r--r--  1 vagrant vagrant     3 Feb 10 19:07 .yo-rc.json
雛形が完成

■Gruntfile.jsの編集
静的サーバを立ち上げてブラウザから確認できるようにhostnameを変更しておく。
今回の場合は192.168.1.222にした。

・・・・
    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '192.168.1.222',
        livereload: 35729
      },
・・・・

■Gruntサーバ起動

$ grunt serve
Running "serve" task

Running "clean:server" (clean) task
>> 1 path cleaned.

Running "wiredep:app" (wiredep) task

Running "wiredep:test" (wiredep) task

Running "concurrent:server" (concurrent) task

    Running "copy:styles" (copy) task
    Copied 1 file

    Done, without errors.

    Execution Time (2015-03-18 01:39:59 UTC)
    loading tasks   5ms  ▇▇▇▇▇▇▇▇▇▇▇ 23%
    copy:styles    16ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 73%
    Total 22ms

Running "autoprefixer:server" (autoprefixer) task
File .tmp/styles/main.css created.

Running "connect:livereload" (connect) task
Started connect web server on http://192.168.1.222:9000

Running "watch" task
Waiting...

■ブラウザで確認

■リリース用ファイル作製

$ grunt build
・・・・
$ ll
total 84
drwxrwxr-x  8 vagrant vagrant  4096 Mar 18 01:42 ./
drwxrwxr-x  3 vagrant vagrant  4096 Mar 18 01:19 ../
drwxrwxr-x  6 vagrant vagrant  4096 Mar 18 01:20 app/
drwxrwxr-x 10 vagrant vagrant  4096 Mar 18 01:21 bower_components/
-rw-rw-r--  1 vagrant vagrant   371 Mar 18 01:20 bower.json
-rw-rw-r--  1 vagrant vagrant    38 Mar 18 01:20 .bowerrc
drwxrwxr-x  7 vagrant vagrant  4096 Mar 18 01:43 dist/　　<-distが作られる
-rw-r--r--  1 vagrant vagrant   415 Feb 10 19:07 .editorconfig
-rw-r--r--  1 vagrant vagrant    11 Feb 10 19:07 .gitattributes
-rw-r--r--  1 vagrant vagrant    52 Feb 10 19:07 .gitignore
-rw-rw-r--  1 vagrant vagrant 10579 Mar 18 01:39 Gruntfile.js
-rw-r--r--  1 vagrant vagrant   376 Feb 10 19:07 .jshintrc
drwxrwxr-x 30 vagrant vagrant  4096 Mar 18 01:21 node_modules/
-rw-rw-r--  1 vagrant vagrant  1154 Mar 18 01:21 package.json
-rw-rw-r--  1 vagrant vagrant   282 Mar 18 01:20 README.md
drwxrwxr-x  3 vagrant vagrant  4096 Mar 18 01:20 test/
drwxrwxr-x  4 vagrant vagrant  4096 Mar 18 01:42 .tmp/
-rw-r--r--  1 vagrant vagrant   110 Feb  2 19:59 .travis.yml
-rw-r--r--  1 vagrant vagrant     3 Feb 10 19:07 .yo-rc.json

これで準備が整ったのであとはapp以下で開発をおこなっていく。

■参考URL
・Yeoman を使って Webアプリの雛形を作ってみる
http://akiyoko.hatenablog.jp/entry/2014/07/31/024528

・yeomanを使ったAngularJSプロジェクトの始め方 2014年版
http://blog.kinzal.net/post/104245981055/yeoman-angularjs-2014

・エンカフェ
https://www.engcafe.tv/?tag=yeoman

・yeoman+grunt+bowerでangularjs+bootstrap+sass環境構築
http://ryutamaki.hatenablog.com/entry/2014/05/26/003744

・Nodeの複数バージョン管理のお供にnをどうぞ
http://dekokun.github.io/posts/2014-01-01.html

■個人メモ
front_dev