html/css/jsの制作をしていると、js周りの挙動で file scheme (file://...) では都合が悪い時があります。
わざわざローカルにapache等のwebサーバを立てるのはしんどい。
いちいちサーバにuploadするのも面倒。
grunt-contrib-connectなら、必要なときだけさくっとローカルで簡易webサーバが立てられます。
gruntで自動テストを行う際はこのプラグインがほぼ必須です。
grunt、grunt-cli、Gruntfile.coffee等が既にある前提で。
grunt-contrib-connect のインストール
package.jsonがあるフォルダで以下を実行
npm install grunt-contrib-connect --save-dev
Gruntfile.coffee に設定追加
以下の項目をGruntfile.coffeeに追加。
「server」の部分は、自由に設定できます。
-
port: 適当なポート番号 -
base: WebサーバのDocumentRootのパス
Gruntfile.coffee
... snipped ...
connect:
server:
options:
port: 8000
base: '.'
... snipped ...
詳細なoptionは grunt-contrib-connect を見ましょう
webサーバの起動
grunt connect:server:keepalive するだけ。
あとは、http://localhost:8000/... でプロジェクト内のファイルが参照できます。
connect-livereload を使うと、より幸せになれるかも。