Gruntでテスト向けの静的サーバを立ち上げる方法

JSのライブラリをちょっと試したいときがある。
それ用の静的サーバをGruntを使えば簡単に立ち上げられるのでメモです。

あらかじめ必要なもの

• gruntが使える環境
  • node.js
  • grunt-cli

ステップ

1. npm initでプロジェクト作成
2. gruntをインストール
3. grunt-contrib-connectをインストール
4. Gruntfile.jsを作成
5. 実行

プロジェクト作成

npm init でプロジェクトを作成しましょう。
といっても、package.jsonが作成されるだけですが。
テスト用の環境なので、とくに記述は要りません。というかpackage.json自体要らないのかも。
この時点でindex.htmlも作成しておくと動かしたときに確認しやすい。

gruntインストール

$ npm install grunt --save-dev

grunt-contrib-connectをインストール

これが静的サーバになります。

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

Gruntfile.js作成

以下のコードを記述します。

module.exports = function (grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {
          port: 9001,  // 適当で可
          keepalive: true,  // これが無いと動き続けないよ〜
          hostname: 'localhost'
        }   
      }   
    }   
  }); 

  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.registerTask('default', ['connect']);
}

実行

$ grunt

これで動きます。
あとは好きな様にCSSなりJSファイルなり、ぶち込めばいいと思います。