Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

Gruntで自動ブラウザ更新

久々にJS案件をやっていて、開発環境にGruntを使ってみようと思い設定してみたのでメモ。自動ブラウザ更新をやる方法は少し前まではgrunt-contrib-livereloadでやるのが主流だったみたいなのですが、grunt-contrib-watchというファイル更新されたか監視するモジュールを使っても出来るらしいので、今回はこっちでやります。こちらの方がファイル数もコード量も少ないので楽チンだと思います。

前提条件

Node.jsとブラウザにLiveReloadのextentionをインストールしておく。

インストール

gruntはNode.jsを使用したCUIです。npmでインストールする。

npm install -g grunt-cli

package.jsonの作成

gruntを使うに当たり、色々とnodeのモジュールを入れてやる必要がありますが、一つ一つ入れていると面倒なので、package.jsonファイルを作ってやってそれからインストールさせます。

package.jsonの中身はこんな感じです。

{
  "name": "project_name",
  "version": "0.1.0",
  "description": "",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.1",
   "grunt-contrib-watch": "~0.5.3",
   "grunt-contrib-connect": "~0.5.0"
  }
}

開発版なのでdevDependenciesにモジュールを記述しています。

package.jsonを実行してパッケージをインストール

npm install

自前で生成しなくともnpmコマンドから対話式で必要情報を入力することで生成することもできる。
(最初はこちらでやった方がいいかもしれない)

npm init

モジュールを個別に入れたい場合

今回自動実行に必要なモジュールを入れる場合

npm install grunt-contrib-watch grunt-contrib-connect --save-dev

これはgrunt-contrib-watch(ファイルが更新された自動感知して処理を実行する)とgrunt-contrib-connect(サーバーを起動してブラウザ上でコンテンツを表示させる)の二つのモジュールをインストールする場合のコマンド。

[ --save-dev]はpackage.jsonのdevDependenciesに追記するためのオプションです。

Gruntfile.jsを作る

最後に自動更新するための処理をGruntfile.jsに書いてやり、これを実行すればok。 こちらの処理の中身はフォルダ内のHTMLを監視して更新したらブラウザをリロードするという内容です。

'use strict';

module.exports = function(grunt) {

    grunt.initConfig({

        connect: {
            livereload: {
                options: {
                    port: 9001
                }
            }
        },

        watch: {
            options: {
                livereload: true
            },
            html: {
                files: '**/*.html',
                tasks: []
            }
        }
    });

    var pkg = grunt.file.readJSON('package.json');
    var t;
    for (t in pkg.devDependencies) {
        if (t.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(t);
        }
    }

    grunt.registerTask("default", ["connect","watch"]);
};

Gruntflle.js設置後にターミナルから

grunt

で実行すれば、サーバーが立ち上がるので、ブラウザからhttp://127.0.0.0.1:9001にアクセスするとファイルが表示できます。HTMLファイルが更新されるとブラウザが自動更新されます。


設定していて詰まったのがgruntを動かすと「Fatal error: Port 35729 is already in use by another process」というエラーを頻発、何だと思って調べてみたら、アプリのLiveReloadとポートが同じだったらしく、アプリの方が先に起動していたためポートが塞がっていただけでした。gruntで自動更新するときはアプリとの併用に注意です。(ってたぶん俺だけだと思う)。

intelliJ IDEAから直接grunt動かす設定も出来ますし便利だ。ちょっと前まではMAMP+LiveReloadを使っていたけど、DB使わないならこっちで十分。早く使っておけば良かった・・・。