＠IT
アジャイル/DevOps
HTML5 + UX
CoffeeScriptやSassなどの使用時にオススメのGrunt...

CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧：Gruntで始めるWeb開発爆速自動化入門（2）（3/3 ページ）

» 2014年04月08日 18時00分公開

[中村修太，クラスメソッド]

前のページへ 1|2|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>

index.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拡張をインストールして有効化しておきます。

Google ChromeのLiveReload拡張

　Gruntを実行し、Chrome拡張をインストールしたら「http://localhost/index.html」にアクセスしてみてください。index.htmlが表示されたら、そのままエディターで編集してみましょう。ファイルを保存すると、すぐにブラウザーの画面が更新されます。いちいち更新ボタンを押す手間が省けますね。