Yeaman(フロントエンド) + easymock(バックエンド) 開発環境

参考URL: http://nantokaworks.com/p1047/
「Yeomanでフロントエンドとバックエンドサーバを一緒に開発する」
大変参考になりました。ありがとうございます。

Yeah men！！
Yeoman！すごく便利です！
バックエンドとの通信部分をモックサーバを立てて開発を進める方法が紹介されていたので実験してみました。
ツールのバージョンも上がって、少し様子が違ってました。
npm view yo version #=> 1.3.2
npm view grunt-cli version #=> 0.1.13
npm view bower version #=> 1.3.12
npm view generator-webapp version #=> 0.5.1
npm view easymock version #=> 0.2.6
npm view grunt-connect-proxy version #=> 0.1.11



Yomanで土台を作成

cd test_yeoman

yo webapp # テンプレートの生成

grunt serve # サーバの起動。動作確認。

モックサーバの用意

npm install -g easymock # 管理者権限で。

cd test_easymock

mkdir api

echo "{}" > api/config.yml # JSON形式(空)

cat <JSON > api/_get.json # コンテンツ

[

  { "id": 1, "user": "AAA", "message": "aaaa" },

  { "id": 2, "user": "BBB", "message": "bbbb" },

  { "id": 3, "user": "CCC", "message": "cccc" }

]

JSON

easymock # モックサーバ起動。

Proxy用パッケージ導入

npm install grunt-connect-proxy --save

# npm install -D grunt-connect-proxy # 同じ意味

#「--save/-D」をつけないとpackage.jsonに追記されないのでgruntがコケます。注意！

モックサーバとの通信デモの作成
app/scripts/main.jsに追加

'use strict';

$.getJSON('/api/', function(data){

  var ul, _i, row, li, txt, _arr;

  ul = document.querySelector('div.ajax > ul');

  _arr=[];

  for (_i=0; _i</ul>

</div>

Gruntfile.jsに追加。gruntも再起動する。

'use strict';

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest; // ★追加



livereload: {

  options: {

    middleware: function(connect) {

      return [

        proxySnippet, // ★追加

        connect.static('.tmp'),

        connect().use('/bower_components', connect.static('./bower_components')),

        connect.static(config.app)

      ];



    }

  }

},

// ★追加★ここから

proxies: [{

    context: '/api',

    host: 'localhost',

    port: '3000',

    https: false,

    changeOrigin: false

}],

// ★追加★ここまで



grunt.registerTask('serve', '----', function (target) {

  grunt.task.run([

    'clean:server',

    'wiredep',

    'concurrent:server',

    'autoprefixer',

    'configureProxies', // ★追加

    'connect:livereload',

    'watch'

  ]);

});

○API仕様とアクセスログはこちらから～
http://localhost:3000/_documentation/
http://localhost:3000/_logs/