ローカルのjsonファイルをgruntでwebサーバ立てて取得できるようにしてみるテスト(grunt-contrib-connect)

はじめに

簡単なwebアプリをローカルに作ってテストでローカルのjsonファイル読むってやりたかったんですけど今ってできないんですね。
※ローカルのindex.htmlをブラウザにドラッグして表示すると、です。
→AjaxでAccess-Control-Allow-Originのエラーを回避する方法

chrome起動オプションでの回避方法は上記のようにできるようですが、
今回はローカルwebサーバを立ててjsonファイルを取得してみようと思います

ちなみに、この記事はnode.jsやgruntの本来の機能はほぼ使ってませんのであしからず。。。

ながれ

特に問題なければ全部で30分もかからないと思います

1.node.jsインストール
2.grunt-cli のインストール
3.テスト用のwebアプリフォルダを作る(デスクトップとかに)
4.grunt.jsの準備する
5.gruntインストール
6.grunt-contrib（プラグイン的な）いれる※今回はサーバ立てる用ののみ
7.gruntfile.jsに処理書く()
8.grunt起動＆ブラウザで確認

※webアプリといってもサーバと通信するようなものはありません

やってみる

1.node.jsインストール

下記のサイトからダウンロードしてmsiファイルをクリックしてインストールするだけです
http://nodejs.org/

ちなみに今回はこれ
node-v0.10.22-x64.msi

こんな感じの画面で何も考えずnextでOKでしょう

何も考えずnextで終わります

一応プロンプトで確認

2.grunt-cli のインストール

npmを使ってgrunt-cliをインストールします。ちなみにnpmとは？

npm とは Node Package Manager の略で Node で作られたパッケージモジュールを管理するためのツールです.
基本 Node.js をインストールすれば一緒にインストールされます. ターミナル or コマンドプロンプトで $npm -v を実行するとバージョンが表示されるのが分かるかと思います.

→こちらから拝借させて抱きました

さっそくプロンプトを立ち上げて下記を入力

C:\Users\hoge>npm install -g grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm http 200 https://registry.npmjs.org/grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli/-/grunt-cli-0.1.11.tgz
npm http 200 https://registry.npmjs.org/grunt-cli/-/grunt-cli-0.1.11.tgz
･･･・・・・・・・・・・・・・・・・
･･･・・・・・・・・・・・・・・・・
npm http 304 https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/sigmund
C:\Users\hoge\AppData\Roaming\npm\grunt -> C:\Users\hoge\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.11 C:\Users\hoge\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.4)
└── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21)

3.テスト用のwebアプリフォルダを作る(デスクトップとかに)

今回はデスクトップにtestAppっていうフォルダを作って中身はこんな感じにしました。
jqueryはなんでも良いです。

C:\Users\hoge\Desktop\testApp>tree /F
フォルダー パスの一覧:  ボリューム OS
ボリューム シリアル番号は xxxx-zzzz です
C:.
└─public
        index.html
        jquery-2.0.3.min.js
        main.js
        test.json

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>gruntでjson取得テスト</title>
</head>
<body>
  <script src="jquery-2.0.3.min.js"></script>
  <script src="main.js"></script>
  <h1>gruntでwebサーバぽいの立ち上げてjson読むテスト</h1>
  <hr>
  <div id="testDiv">あいうえお</div>
</body>
</html>

main.js

(function(){
  $.ajax({
    //url : "http://192.168.153.1:1234/test.json",
    url : "http://localhost:8000/test.json",
    success : function(data){
      // jsonが取得できたらdivを書き換えるだけ
      $("#testDiv").html(data.message);
    }
  });
})();

test.json

{
  "message" : "書き換えるメッセージだよ"
}

4.grunt.jsの準備する
準備といってもnpmコマンドの初期化するやつを打つだけです

npm init

フォルダ名(testApp)が日本語だとエラるかもです

以下が例です
プロンプトを開いて3で作ったフォルダに移動してから行います
途中で何か聞かれますが全て何も入力せずEnter押しました

C:\Users\hoge>cd Desktop\testApp 
C:\Users\hoge\Desktop\testApp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (testAoo)
version: (0.0.0)
description: test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to C:\Users\hoge\Desktop\testApp\package.json:

{
  "name": "testAoo",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}


Is this ok? (yes)

フォルダを見てみると「package.json」ができてるかと思います

C:\Users\hoge\Desktop\testBpp>tree /F
フォルダーパスの一覧: ボリューム OS
ボリュームシリアル番号は xxxx-zzzzです
C:.
│ package.json
│
└─public
index.html
jquery-2.0.3.min.js
main.js
test.json

5.gruntインストール

4に続けて、プロンプトでtestAppフォルダに移動したまま行います

npm install grunt --save-dev

以下が実行した例です

C:\Users\hoge\Desktop\testApp>npm install grunt --save-dev
npm WARN package.json testApp@0.0.0 No repository field.
npm WARN package.json testApp@0.0.0 No README data
npm http GET https://registry.npmjs.org/grunt
npm http 304 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/async
･･･・・・・・・・・・・・・・・・・
･･･・・・・・・・・・・・・・・・・
npm http GET https://registry.npmjs.org/underscore
npm http 304 https://registry.npmjs.org/underscore
grunt@0.4.1 node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.13
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── findup-sync@0.1.2 (lodash@1.0.1)
├── iconv-lite@0.2.11
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── nopt@1.0.10 (abbrev@1.0.4)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

--save-devをつけることでpackage.jsonにインストールした情報が追加されるようです。

6.grunt-contrib（プラグイン的な）いれる※今回はサーバ立てる用ののみ

npm install grunt-contrib-connect --save-dev

以下実行した例

C:\Users\hoge\Desktop\testApp>npm install grunt-contrib-connect --save-dev
npm WARN package.json grunttest@0.0.0 No repository field.
npm WARN package.json grunttest@0.0.0 No README data
npm http GET https://registry.npmjs.org/grunt-contrib-connect
npm http 200 https://registry.npmjs.org/grunt-contrib-connect
･･･・・・・・・・・・・・・・・・・
･･･・・・・・・・・・・・・・・・・
npm http 200 https://registry.npmjs.org/mime/-/mime-1.2.11.tgz
grunt-contrib-connect@0.5.0 node_modules\grunt-contrib-connect
├── connect-livereload@0.2.0
├── open@0.0.4
└── connect@2.7.11 (fresh@0.1.0, cookie-signature@1.0.1, qs@0.6.5, debug@0.7.4, bytes@0.2.0, pause@0.0.1, buffer-crc32@0.2.1, cookie
, send@0.1.1)

ここでも--save-devつけたのでpackage.json見ると中身に情報が追加されてると思います

ちなみにここでフォルダを見るとnode_modulesというフォルダができていているのがわかるかと思います

C:\Users\hoge\Desktop\testApp>tree
フォルダーパスの一覧: ボリューム OS
ボリュームシリアル番号は xxxx-zzzzです
C:.
├─node_modules
│ ├─grunt
│ └─grunt-contrib-connect
└─public

7.gruntfile.jsに処理書く

package.jsonと同じフォルダに、Gruntfile.jsというファイルを作成します

C:\Users\hoge\Desktop\testBpp>tree /F
フォルダーパスの一覧: ボリューム OS
ボリュームシリアル番号は zzzz-xxxx です
C:.
│ Gruntfile.js
│ package.json
│
└─public
index.html
jquery-2.0.3.min.js
main.js
test.json

Gruntfile.js

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // grunt-contrib-connectの設定(Webサーバの設定)
    connect: {
      server: {
        options:{
          port:8000,
          base:'C:/Users/hoge/Desktop/testApp/public',
          keepalive:true,
          hostname:'localhost' //192.168.153.1
        }
      }
    }
  });

   // Load tasks(grunt実行時に読み込むプラグイン)
  grunt.loadNpmTasks('grunt-contrib-connect');

  // Default tasks(grunt実行時に実行するタスク)
  grunt.registerTask('default', ['connect']);
};