快適なライブリロード環境をつくる(Grunt + LiveReloadX)

2013.10.28kickbaseHTML | JavaScript


HTMLやCSS、JSを編集し保存してはブラウザをリロード、保存してはリロード…という面倒な確認作業は過去の話。皆さんライブリロードを使っている方も多いかと思います。このライブリロードという機能は簡単に言うと、「ファイルの編集を行うと、自動的にブラウザがリロードされる」というものです。最近のブラウザにはこの機能が内蔵されているものもあり、簡単に環境を作ることができます。

しかし特定のエディタに依存してしまったり、ブラウザ機能拡張をいれなければいけなかったりと、少々不都合もありました。(私が愛用しているエディタはWebStormですが、こちらもChromeプラグインを使う形式です)

よって今回の記事は下記を特徴としたライブリロード環境のご紹介をしようと思います。操作ははWindows7で行いました。
※GruntやNode.jsの導入方法は省略させていただきます。詳しくは参考サイトを御覧ください

  1. 無料
  2. Windows/Macを問わない
  3. エディタに依存しない
  4. ブラウザ機能拡張を用いないのでブラウザの種類も問わない
  5. スマートフォンのブラウザでも動作

またGruntを使用している方も多いかと思いますので、Gruntでのライブリロードについてもご紹介します。

▼LiveReloadX単体で使用する

今回の記事はにとよん氏(@nitoyon)が作成したLiveReloadXを大きくフィーチャーしたものとなります。作者に感謝をしながら使わせていただきましょう。

導入方法や説明については下記本家のブログに詳細に書かれています。ここでは使い方の補足だけ行いたいと思います。

ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った – てっく煮ブログ

まずは下準備、LiveReloadXをインストールしておきましょう。コマンドプロンプトで下記コマンドを実行します。

npm install -g livereloadx

インストールははじめの一回だけです。あとは、下記手順で進めていきます。

  1. Windowsキー+Rで「ファイル名を指定して実行」がポップアップするので、cmdと入力してエンターキーを押します
  2. コマンドプロンプトが立ち上がるので、コマンドを実行していきます
  3. cd [監視したいディレクトリ]で移動します。パスの指定はフォルダをドラドロしてもOK
  4. livereloadx -s コマンドを実行( 静的Webサーバモード )
  5. 指定したフォルダ内の監視が始まるので、コーディングを行います
  6. デフォルトでは「‌‌‌‌http://localhost:35729/」にアクセスすると、指定ディレクトリのindex.htmlが表示されます
  7. プロセスを切るときには、C-c
  8. 「バッチ ジョブを終了しますか( Y/N )?」と聞かれるのでyで終了します


※3,4はまとめることができます。cdコマンドを使わず、livereloadx -s [ 監視したいディレクトリ ]というコマンドでもOKです

LiveReloadXのインストールさえすましておけば、コマンド一発で監視状態になるのでとても便利ですね。
プラグインもスニペットの挿入も必要ありませんので、特に自動化など併用していない場合は、この方法をおすすめします。

▼GruntタスクとしてLiveReloadXを使用する
これが今回のテーマです。とはいえこちらも本家のUsageに詳細が書いてあります。

LiveReloadX | Reload your Browser Automatically

  1. cd [監視したいディレクトリ]で移動する。パスの指定はフォルダをドラドロしてもOK
  2. npm install livereloadx –save-devコマンドを実行し、LiveReloadXのモジュールをインストールします
  3. gruntコマンドを実行します
  4. 指定したフォルダ内( Gruntfile.jsに記述 )の監視が始まるので、コーディングを行います
  5. 「http://localhost:9001/」でアクセスすることができます。
  6. プロセスを切るときには、C-c
  7. 「バッチ ジョブを終了しますか( Y/N )?」と聞かれるのでyで終了します

参考までに設定ファイルを掲載しておきます。

package.json

{
  "name": "grunttest",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfiles.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "kickbase",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-watch": "~0.5.3",
    "livereloadx": "~0.3.1"
  }
}

Gruntfiles.js

modole.exports = function (grunt) {

    var pkg = grunt.file.readJSON ('package.json');

    grunt.initConfig ({
			  concat: {
			      'build/release.js': [
				  'js/**/*.js'
			      ]
			  },
			  watch: {
			      html: {
				  files: '**/*.html',
				  tasks: []
			      },
			      jslib: {
				  files: ['js/**/*.js', '*.html'],
				  tasks: ['concat']
			      }
			  },
			  livereloadx: {
			      static: true,
			      dir: '.',
			      port:9001
			  }
		      });

    grunt.loadNpmTasks('livereloadx');

    var taskName;
    for (taskName in pkg.devDependencies) {
        if (taskName.substring (0, 6) == 'grunt-') {
            grunt.loadNpmTasks (taskName);
        }
    }

    grunt.registerTask ('default', ['livereloadx','watch']);
};

ポイントはふたつです。

			  livereloadx: {
			      static: true,
			      dir: '.',
			      port:9001
			  }

staticオプションをtrueに、監視するディレクトリを文字列で指定、ポート番号をportオプションで指定します。

    grunt.loadNpmTasks('livereloadx');

package.jsonから文字列をもとにロードする方法(31行目のfor文以降)では、livereloadxは読み込めないため、上記ワンライナーを追加しておきます。

今回はconcat,watch,livereloadxと、必要最低限のモジュールしか使いませんでしたが、好みのものと組み合わせるといいでしょう

▼grunt-watchを使用する
備考までに、grunt-watchでライブリロードをする方法を掲載しておきます。ただし、この方法ではJSスニペットをHTML側に挿入するか、ブラウザ機能拡張を入れる必要があります。個人的には上記ふたつの方法がおすすめです。

  1. cd [監視したいディレクトリ]で移動する。パスの指定はフォルダをドラドロしてもOK
  2. gruntコマンドを実行します
  3. 指定したフォルダ内の監視が始まるので、コーディングを行います
  4. プロセスを切るときには、C-c
  5. 「バッチ ジョブを終了しますか( Y/N )?」と聞かれるのでyで終了します

ブラウザ機能拡張のLivereloadプラグインを入れない場合は、下記JSスニペットをHTMLに埋め込む必要があります。

<script src="//localhost:35729/livereload.js"></script>

Gruntfiles.js

// Gruntfile.js
modole.exports = function(grunt) {

    var pkg = grunt.file.readJSON ('package.json');

    grunt.initConfig({
             concat: {
                 'build/release.js': [
                 'js/**/*.js'
                 ]
             },
             watch: {
                 html: {
                 files: '**/*.html',
                 tasks: [],
                 options: {
                     livereload: true,
                     nospawn: true
                 }
                 },
                 jslib: {
                 files: ['js/**/*.js','*.html'],
                 tasks: ['concat'],
                 options: {
                     livereload: true,
                     nospawn: true
                 }
                 }
             },
             connect: {
                 livereload: {
                 options: {
                     port: 9001
                 }
                 }
             }
             });

    var taskName;
    for (taskName in pkg.devDependencies) {
        if (taskName.substring (0, 6) == 'grunt-') {
            grunt.loadNpmTasks (taskName);
        }
    }
    grunt.registerTask('defaolt', ['connect','watch']);
};

参考サイト

    Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

  1. ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った -てっく煮ブログ
  2. LiveReloadX を Grunt から使えるようにした – てっく煮ブログ
  3. LiveReloadX | Reload your Browser Automatically

ページトップへ