Grunt/TIPS集のバックアップ差分(No.4)

追加された行はこの色です。
削除された行はこの色です。
#topicpath
----


#contents

**StubbyというJSONのmockサーバを起動する [#ifd55332]
***パッケージのインストール [#t429401b]
JSONのmockサーバの構築メモ。
[[grunt-connect-proxy, grunt-stubbyを利用してAjax用のJSON（モックデータ）を取得する[grunt]>http://zkohi.hatenablog.com/entry/2013/12/24/002541]] ココ参考にさせてもらいました！！ありがとうございます。


 npm install grunt-stubby --save-dev

 mkdir -p grunt
 mkdir -p mocks/stubby/hoge

*** gruntから起動するよう、設定ファイルを記述 [#m47d073a]
 cat grunt/stubby.js

 'use strict';
  
 module.exports = function (grunt) {
 
   grunt.config('stubby', {
     stubsServer: {
       // note the array collection instead of an object
       options: {
         callback: function (server, options) {
           server.get(1, function (err, endpoint) {
             if (!err) {
               console.log(endpoint);
             }
           });
         },
         stubs: 3000,
         tls: 8443,
         admin: 8010,
         location: '0.0.0.0',
         persistent: true
       },
       files: [{
         src: ['mocks/stubby/**/*.yaml']
       }]
     }
   });
 
 };

gruntから起動するため Gruntfile.js に
 grunt.loadTasks('grunt');
と記述(( grunt.registerTask('serve', ... の真上あたりに。。))。

***stubbyの設定の記述 [#dfdab6a5]
 cat mocks/stubby/hoge.yaml

  -
  request:
    url: ^/ajax/hoge/$
    method: GET
  response:
    -
      status: 200
      headers:
        content-type: application/json
        file: mocks/stubby/hoge/get.json

 cat mocks/stubby/hoge/get.json

 {
    "foo":"1",
    "bar":"2"
 }

*** Gruntからstubbyを起動 [#qa82e1d1]
 grunt stubby
REST なクライアント((https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo/related))やブラウザから
 http://localhost:3000/ajax/hoge/
へアクセスするとJSONデータが取得できましたー。。


*** grunt serveで起動 [#e331add6]
grunt serveで起動するために serveのタスクに追加します。
 grunt.task.run([
   'clean:server',
   'wiredep',
   'concurrent:server',
   'autoprefixer:server',
   'connect:livereload',
   'stubby',  ←追加
   'watch'
 ]);


***差分。 [#cb4a7607]
https://github.com/masatomix/ui-router-sample/commit/1347af60619368d0eb34731e6d58cbc1ba61ce31


** Proxyをつかう [#g4d89021]
gruntが起動したWEBサーバから、Stubbyで起動したmockサーバにreverse proxyする設定を追加します。というのは、JavaScriptは基本的には別サーバのJSONにはアクセスできない((Same Origin Policyすね))つまりgruntのWEBサーバから落としてきたJavaScriptはgruntのJSONにしかアクセスできないので、Stubbyが動いてるmockサーバのJSONに直接アクセスすることはできません。従って、いったんgruntのWEBサーバにアクセスしてreverse proxyする必要があるわけです。

 gruntのWEBサーバの /hoge/fuga.json -- proxy --> stubbyの /hoge/fuga.json
つまりこういうことです。



[[grunt-connect-proxyのめも - yamashiro0110の日記>http://yamashiro0110.hatenadiary.jp/entry/2014/12/09/020140]] ココを参考にさせてもらいました。ありがとうございます!!

 npm install grunt-connect-proxy  --save-dev

*** Gruntfile.jsへ設定追加 [#f8786b35]
ココの下あたりに一行追加。
 // Time how long tasks take. Can help when optimizing build times
 require('time-grunt')(grunt);
 var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

続いて connect.livereload.middleware あたりに以下を追加。あとproxiesの設定も追加。

 // The actual grunt server settings
 connect: {
   options: {
    割愛
   },
   proxies: [
     {
       // `localhost:9000/ajax`へのリクエストは`localhost:3000/ajax`へプロキシされるようになる
       context: '/ajax/',
       host: 'localhost',
       port: 3000
     }
   ],
   // ↑このproxies配列追加
   livereload: {
     options: {
       open: true,
       middleware: function (connect) {
         return [
           proxySnippet,    ←ココ追加
           connect.static('.tmp'),
           ... いろいろ書いてあったけど割愛。。。
         ];
       }
     }
   },
  ... 以下省略。

最後に grunt serve で起動するためのserveのタスクに追加。
    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'configureProxies',   ←ココ追加。
      'autoprefixer:server',
      'connect:livereload',
      'stubby',
      'watch'
    ]);
  });

grunt serve したあと、
 http://localhost:9000/ajax/hoge/
へアクセスしてさっきのJSONデータが取れれば成功です。。

お疲れ様でした。

***差分 [#n8b1bfa6]
https://github.com/masatomix/ui-router-sample/commit/d48210149ddd407ab5bbd4d52b870957db2baea9
なんか勝手に整形されていろいろ差分出ちゃってるけどごめんなさいって感じ(´Д`;)。。


**関連リンク [#w93bef16]
-[[Grunt: The JavaScript Task Runner>http://gruntjs.com/]]

-[[Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17>http://kojika17.com/2013/03/grunt.js-memo.html]]
-[[Gruntfile.jsの設定をファイル分割する[grunt] - いつかは起業したいエンジニアのブログ>http://zkohi.hatenablog.com/entry/2013/12/23/120522]]

mockとProxy関連。
-[[grunt-connect-proxy, grunt-stubbyを利用してAjax用のJSON（モックデータ）を取得する[grunt] - いつかは起業したいエンジニアのブログ>http://zkohi.hatenablog.com/entry/2013/12/24/002541]]
-[[grunt-connect-proxyのめも - yamashiro0110の日記>http://yamashiro0110.hatenadiary.jp/entry/2014/12/09/020140]]
-[[Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog>http://albatrosary.hateblo.jp/entry/2014/02/06/155004]]
-[[YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 - bathtimefish's blog>http://bathtimefish.hatenablog.com/entry/2013/04/22/125127]]



----
この記事は
#vote(おもしろかった,そうでもない)
#vote(おもしろかった[1],そうでもない[0])

#comment

#topicpath

SIZE(10){現在のアクセス:&counter;}
Grunt/TIPS集 のバックアップ差分(No.4)

Grunt/TIPS集のバックアップ差分(No.4)
