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

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。今回は、Gruntプラグインの概要と便利なものをまとめたgrunt-contrib、ファイルが監視できるgrunt-contrib-watch、livereload（自動更新）を実現するgrunt-contrib-connectなどの使い方を解説する。

[中村修太，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

【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を聴きながらプログラミングするのが大好きです。