CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧：Gruntで始めるWeb開発爆速自動化入門（2）（3/3 ページ）
【3】grunt-contrib-connectを使ってlivereload（自動更新）
最後に、HTTPサーバーを起動するためのプラグインを使ってみましょう。
grunt-contrib-connectプラグインを使用すると、HTTPサーバーを起動できます。HTMLを記述するときなど、わざわざ自分でサーバーを用意しなくてもGruntからサーバーを起動してアクセス可能になります。
今回はこのプラグインでHTTPサーバーを起動し、HTMLのlivereloadを試してみましょう。
ファイルの作成とプラグインのインストール
livereloadを試すために、「grunt-plugin-sample」ディレクトリにhtmlディレクトリを作成し、そこへhtmlファイルを作成しましょう。
取りあえず下記のようなindex.htmlファイルを用意しました。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<title>livere load</title>
</head>
<body>
<h1>sample html</h1>
</body>
</html>
そして、grunt-contrib-connectプラグインをインストールします。
% npm isntall grunt-contrib-connect --save-dev
Gruntfile.js作成
次にGruntfile.jsを下記のように修正します。
connectタスクではサーバーを9000番ポートで起動するように指定し、htmlディレクトリをサーバーのドキュメントルートとして起動するように指定しています。また、watchタスクではhtmlディレクトリ以下の変更を監視し、「livereload」オプションを有効にしています。
// 'use strict';
module.exports = function (grunt) {
grunt.initConfig({
watch: {
options: {
livereload: true
},
html: {
files: ['html/**/*.html'],
tasks: ['']
}
},
connect: {
server: {
options: {
port: 9000,
base: 'html'
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.registerTask("default", ["connect", "watch"]);
};
Gruntを実行します。
% grunt connect watch Running "connect:server" (connect) task Started connect web server on http://0.0.0.0:9000 Running "watch" task Waiting...
Google ChromeのLiveReload拡張で動作確認
livereloadを確認してみます。今回はGoogle Chrome（v33）を使用して動作確認をしたのですが、その前にブラウザー側にLiveReload拡張をインストールして有効化しておきます。
Gruntを実行し、Chrome拡張をインストールしたら「http://localhost/index.html」にアクセスしてみてください。index.htmlが表示されたら、そのままエディターで編集してみましょう。ファイルを保存すると、すぐにブラウザーの画面が更新されます。いちいち更新ボタンを押す手間が省けますね。
次回は、Grunt用プラグインを自成する
さて、今回はGrnut公式プラグインの、「grunt-contrib-coffee」「grunt-contrib-watch」「grunt-contrib-connect」について簡単に紹介しましたが、いかがでしたでしょうか。
CoffeeScriptをコンパイルしたり、ファイル監視と自動更新を試したりと、Gruntを使用することで、シンプルながら便利な機能を簡単に実現できました。これら以外にもGruntには便利なプラグインが多数存在するので、いろいろ探してみてください。
次回は、こういったGrunt用プラグインを自分で作成する方法について紹介する予定です。
著者プロフィール
中村修太（なかむら しゅうた）
クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。
関連記事
ユカイ、ツーカイ、カイハツ環境！（32）：exe/dmgしか知らない人のためのインストール／パッケージ管理／ビルドの基礎知識
Windows、Mac、Linuxごとのインストーラー、仮想実行環境、言語ごとのモジュール（ライブラリ）管理・ビルドツール、ローカルリポジトリによる配布、標準リポジトリ、GitHubでの公開などを紹介。
爆捗！ WordPressテーマ作成ショートカット（6）：CSSコーディングでいますぐ使えるSass／Compass実践テク10連発！
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、Compassの「設定変数」やCSSスプライト、CSS3 Media Queries（メディアクエリ）やミックスインの共有などに関する小技を紹介する。
初心者のためのJavaScript入門（1）：ようこそJavaScriptの世界へ (1/4)
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？
フレームワークで実践！ JavaScriptテスト入門（1）：JavaScriptテストの基礎知識と使えるフレームワーク6選 (1/3)
しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する
Scala＋Play 2.0でWebアプリ開発入門（9）：Play2におけるJSONおよびCoffeeScriptの使い方
JSONを扱うためのパッケージやJSONとScalaの相互変換の方法、JsPathの使い方、CoffeeScriptの使い方などを解説します。- WebデザイナのためのHTMLチューニング入門（1）：Webサイトを“速く”表示させる7つの計測ポイント
FirefoxやYSlowを使ってWebサイトの問題点を探るには？ ライブドアブログを速くした著者が7つのポイントを伝授します
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。