Sign in Subscribe
grunt

grunt-cli (grunt.js v0.4.x)で LiveReload を試してみた

kamiyam

• 2 min read

GRUNTのバージョンがv0.4.0になり、記述・利用方法が一新されました。

Grunt 0.4.0 released

主な変更点と言えば、

  • grunt-cli をグローバルインストール
  • gruntを各プロジェクトごとにローカルインストール
  • プラグイン(contrib-xxxなど）は細かく細分化された
  • (プラグインはpackage.json に記述し npm install でインストール)

Yeomanも1.0から grunt-cli をインストールする形になっています。

手順

今回はLiveReloadを試してみたいと思います。

grunt-contrib-livereload

Sass,lessの自動コンパイルなどは無しで。

ファイル一式(gist)
https://gist.github.com/kamiyam/4996713

□□□□□□□□□□□

grunt をインストールして作業用のフォルダを作成する
もし、0.4.0以前のgruntがインストールされていれば削除する

$ npm uninstall -g grunt #v0.3系のgruntを削除
$ npm install -g grunt-cli
$ mkdir project-name
$ cd project-name

□□□□□□□□□□□

package.json を作成する。
どのgruntプラグインが必要かの管理などを記述します。

$ vim package.json

{
  "name": "gruntjs0.4-beginning",
  "version": "0.1.0",
  "Dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-connect": "~0.1.2",
    "grunt-contrib-livereload": "~0.1.1",
    "grunt-regarde": "~0.1.1"
  }
}

grunt プラグインダウンロード

$ npm install

プラグインが一式ダウンロードされる。
※ プラグインを npm install grunt-regarde@0.1.1 などで直接インストールしても良いのですが、package.json に記述することで同じプラグインを使う場合、package.json をコピーするだけで良いので管理が楽になります。

(2013.02.22追記)npm install grunt-regarde@0.1.1 など、package.json に記述せずにプラグインをインストールする場合、--saveオプションを使います。 
npm install grunt-regarde@0.1.1 --save-dev

package.json を開いてみると devDependencies の項目に ｢ "grunt-regarde": "0.1.1" ｣と追記されていることが確認出来ます。

--save
"Dependencies" にnpm install したモジュール名が追記される
--save-dev
"devDependencies"に npm install したモジュール名が追記される
grunt で使用するモジュールは、devDependencies (開発時のみ使用)の項目だと思われるので、--save-dev を使います。

□□□□□□□□□□□

Gruntfile.js を作成します。(頭文字は大文字)
grunt がどのように動作するかの設定をします。
※ CoffeeScriptで書くなら Gruntfile.coffee でもOK

$ vim Gruntfile.js

*.html ファイルの変更を監視してリロードをかける設定です。

'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
 
var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};
 
module.exports = function (grunt) {
  // Project configuration.
  grunt.initConfig({
    connect: {
      options: {
          port: 9000,
          // change this to '0.0.0.0' to access the server from outside
          hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function(connect, options) {
            return [lrSnippet, folderMount(connect, '.')]
          }
        }
      }
    },
    // Configuration to be run (and then tested)
    regarde: {
      fred: {
        files: '*.html',
        tasks: ['livereload']
      }
    }
 
  });
 
  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');
 
  grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);
};

□□□□□□□□□□□

表示用のhtmlファイルを作成
この辺りは適当に

$ vim index.html

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
    <meta charset="UTF-8">
</head>
<body>
Live reload!!
</body>
</html>

□□□□□□□□□□□

gruntのタスク実行

$ grunt

□□□□□□□□□□□

(2013.03.27追記)上記サンプルコードを使用する場合、LiveReload用の拡張機能は不要でした。
(2013.03.28追記)やはり必要であるみたいです。
(2013.05.27追記)拡張機能は不要です。connectプロパティの指定が間違っていました。(修正済)

LiveReload用の拡張機能があるので自分の使うブラウザのものをチョイスする
How do I install and use the browser extensions?

私は chrome-extension の LiveReload を インストール
(extensionを使わない方法もある)

□□□□□□□□□□□

http://localhost:9000/index.html にアクセス

Chrome メニューから LiveReload の ボタンをクリック。(中央の白丸が黒丸の場合はそのまま)

Live Reload

クリックすると、中央の白丸が黒丸に代わり監視状態に入る。

index.htmlをの内容を変更して保存。保存されると同時にgruntタスクがブラウザのリロードを実行する。

変更内容が反映されていればOK

Sign up for more like this.

Enter your email
Subscribe