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

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

[中村修太,クラスメソッド]
前のページへ 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が表示されたら、そのままエディターで編集してみましょう。ファイルを保存すると、すぐにブラウザーの画面が更新されます。いちいち更新ボタンを押す手間が省けますね。

次回は、Grunt用プラグインを自成する

 さて、今回はGrnut公式プラグインの、「grunt-contrib-coffee」「grunt-contrib-watch」「grunt-contrib-connect」について簡単に紹介しましたが、いかがでしたでしょうか。

 CoffeeScriptをコンパイルしたり、ファイル監視と自動更新を試したりと、Gruntを使用することで、シンプルながら便利な機能を簡単に実現できました。これら以外にもGruntには便利なプラグインが多数存在するので、いろいろ探してみてください。

 次回は、こういったGrunt用プラグインを自分で作成する方法について紹介する予定です。

著者プロフィール

中村修太

中村修太(なかむら しゅうた)

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。