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が表示されたら、そのままエディターで編集してみましょう。ファイルを保存すると、すぐにブラウザーの画面が更新されます。いちいち更新ボタンを押す手間が省けますね。

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

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

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

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

「Gruntで始めるWeb開発爆速自動化入門」バックナンバー

著者プロフィール

中村修太

中村修太（なかむら しゅうた）

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


前のページへ 1|2|3 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

@ITについて

RSSについて

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

メールマガジン登録

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