Grunt/TIPS集

---

StubbyというJSONのmockサーバを起動する †

パッケージのインストール †

JSONのmockサーバの構築メモ。 grunt-connect-proxy, grunt-stubbyを利用してAjax用のJSON（モックデータ）を取得する[grunt] ココ参考にさせてもらいました！！ありがとうございます。

npm install grunt-stubby --save-dev

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

gruntから起動するよう、設定ファイルを記述 †

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');

と記述*1。

stubbyの設定の記述 †

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を起動 †

grunt stubby

REST なクライアント*2やブラウザから

http://localhost:3000/ajax/hoge/

へアクセスするとJSONデータが取得できましたー。。

grunt serveで起動 †

grunt serveで起動するために serveのタスクに追加します。

grunt.task.run([
  'clean:server',
  'wiredep',
  'concurrent:server',
  'autoprefixer:server',
  'connect:livereload',
  'stubby',  ←追加
  'watch'
]);

差分。 †

https://github.com/masatomix/ui-router-sample/commit/1347af60619368d0eb34731e6d58cbc1ba61ce31

Proxyをつかう †

gruntが起動したWEBサーバから、Stubbyで起動したmockサーバにreverse proxyする設定を追加します。というのは、JavaScript?は基本的には別サーバのJSONにはアクセスできない*3つまり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の日記 ココを参考にさせてもらいました。ありがとうございます!!

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

Gruntfile.jsへ設定追加 †

ココの下あたりに一行追加。

// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

require('jit-grunt')(grunt, { の下あたりに、

   configureProxies: 'grunt-connect-proxy',

を追加。

続いて 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データが取れれば成功です。。

お疲れ様でした。

差分 †

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

grunt-connect-proxy 設定いろいろ †

普通?の設定 †

proxies: [
  {
     context: '/api/hogehoge01/',
    host: 'localhost',
    port: 3000
  },
  {
    context: '/api/hogehoge02/',
    host: 'localhost',
    port: 3000
  }
],

普通に、 http://localhost:9000/api/hogehoge01/ -> http://localhost:3000/api/hogehoge01/ などへ転送します。

他のサーバへの転送 †

proxies: [
  {
    context: '/api/hogehoge01/',
    host: 'fugaServer',
    port: 8080
  }
],

http://localhost:9000/api/hogehoge01/ -> http://fugaServer:8080/api/hogehoge01/ など他のサーバへ、転送します。

パスを書き替えて転送する †

たとえばTomcatへ転送する場合に http://localhost:8080/hogeapp/api/hogehoge01/ などのコンテキストパス(hogeapp)を追加したいケースです

proxies: [
  {
    context: '/api/hogehoge01/',
    host: 'localhost',
    port: 8080,
    rewrite:{
      '^/api/hogehoge01/': '/hogeapp/api/hogehoge01/'
    }
  }
],

というrewrite属性をつけることで、コンテキストパスを追加することができます。

stubby設定いろいろ †

ファイルを返す †

-
  request:
    url: ^/ajax/sample1/1234$  ←完全一致
    method: GET
  response:
    -
      status: 200
      headers:
        content-type: application/json
      file: mocks/stubby/hoge/sample1.json

このファイルのJSONデータが返ります。

URL毎に違うJSONファイルを返す †

-
   request:
     url: ^/ajax/sample2/(([a-z]{3})-([0-9]{3}))$
     method: GET
   response:
     -
       status: 200
       headers:
         content-type: application/json
       file: mocks/stubby/hoge/<% url[1] %>.json

たとえば、

 /ajax/sample2/abc-123

というリクエストに対して、

mocks/stubby/hoge/abc-123.json

のJSONファイルを返す事ができます。

あとは正規表現のハナシですが、

url: ^/ajax/sample2/..*\.json$

とかすれば、

/ajax/sample2/[任意の文字列].json

に対して処理するなどもできますね。

ファイルからでなくて、設定にデータもかける †

-
  request:
    url: ^/ajax/sample3/(([a-z]{3})-([0-9]{3}))$
    method: GET
  response:
    -
      status: 200
      headers:
        content-type: text/html
      body:
        URL0 [<% url[0] %>] <br />
        URL1 [<% url[1] %>] <br />
        URL2 [<% url[2] %>] <br />
        URL3 [<% url[3] %>] <br />

たとえば、

 /ajax/sample3/abc-123

というリクエストに対して、

URL0 [/ajax/sample3/abc-123] <br />
URL1 [abc-123] <br />
URL2 [abc] <br />
URL3 [123] <br />

というhtmlを返す事ができます。ファイル指定でなくて、データ自体を設定に書くこともできますね。ファイルを返すときにつかったプレースホルダはデータ自体にも使えるわけですね。

ファイルのなかでプレースホルダを使う †

-
  request:
    url: ^/ajax/sample4/(([a-z]{3})-([0-9]{3}))$
    method: GET
  response:
    -
      status: 200
      headers:
        content-type: text/html
      file: mocks/stubby/hoge/sample4.html

たとえば、

 /ajax/sample4/abc-123

というリクエストに対して、固定でファイルを指定します。htmlファイル自体に、

URL0 [<% url[0] %>] <br />
URL1 [<% url[1] %>] <br />
URL2 [<% url[2] %>] <br />
URL3 [<% url[3] %>] <br />

このようにプレースホルダを指定しても正しく置換されました。プレースホルダは設定ファイル内でもつかえるし、その先のファイル内でもつかえるようですね。

レイテンシ(遅延)msを指定 †

-
  request:
    url: ^/ajax/sample4/(([a-z]{3})-([0-9]{3}))$
    method: GET
  response:
    -
      status: 200
      latency: 3000 ← 3秒
      headers:
        content-type: text/html
      file: mocks/stubby/hoge/sample4.html

など。。

関連リンク †

• stubby公式
• 上記のソース
• サルにもわかる正規表現入門
• Windowsユーザーに教えるLinuxの常識（6）：使うほどに良さが分かる正規表現 (2/2) - ＠IT

grunt serveのWEBサーバを他のノードからも参照可能にする †

Gruntfile.js において

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

コメント通り、 0.0.0.0 にすればOKぽい。

karmaをつかう †

npm install phantomjs
npm install jasmine-core
npm install karma
npm install grunt-karma

grunt karma

• angularjs - Cannot find module 'karma' while using grunt - Stack Overflow

関連リンク †

• Grunt: The JavaScript Task Runner

• Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17
• Gruntfile.jsの設定をファイル分割する[grunt] - いつかは起業したいエンジニアのブログ

mockとProxy関連。

• grunt-connect-proxy, grunt-stubbyを利用してAjax用のJSON（モックデータ）を取得する[grunt] - いつかは起業したいエンジニアのブログ
• grunt-connect-proxyのめも - yamashiro0110の日記
• Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog
• YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 - bathtimefish's blog
• jit-grunt support #56
• https://github.com/drewzboto/grunt-connect-proxy

---

この記事は

選択肢	投票
おもしろかった	2
そうでもない	0

お名前:

現在のアクセス:4850