GoogleMap サンプルのプロジェクトに Grunt の LiveReload を有効にする設定を追加しました

公開日: : 最終更新日:2014/05/05 JavaScript , , ,

ウチのブログで公開している GoogleMaps API を使った GoogleMap のサンプルプログラム Google Map サンプル ですが、GruntLiveReload を適用してみました。

icatch-browser_3376956889_mini

photo credit: Spencer E Holtaway via photopin cc

目次

1. Grunt と LiveReload とは

JavaScript のタスクランナーということですが、自動化ツールです。

Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。

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

上記引用サイトにありますが、JavaScript や CSS の minify やメタ言語のコンパイルなんかを自動でやってくれるツールです。

Grunt の存在やできることぐらいは知っていましたが、ボクは普段 JavaScript よりも Java でコードを書くことが多いので「ふーん」って感じでした。

でまぁ、プライベートで JavaScript を書くことも多くなってきたし、Sublime Text3 で LiveReload プラグインが有効にならないので、「それなら Grunt で LiveReload を使ってみるか」ってことで導入してみました。

LiveReload は、ファイルが保存したことを検知してブラウザを更新するって機能です。


Google Map サンプル のソースコードは GitHub で公開していて、v0.4 では LiveReload を有効にするための設定ファイルも push 済みです。

以下では、このプロジェクトで LiveReload を有効にするための環境構築と、実行方法をメモしておきます。

2. Grunt を使うためのセットアップ

Grunt のサイトにある Getting started を見てもらえばセットアップから実行までできますが、手っ取り早く済ませるためにピックアップして書いておきます。

Grunt の実行には Node.js が必要なのでインストールします。
Windows で Node.js をインストールする方法は、次の記事でも扱ってますので良かったら参照してください。

Node.js のインストールが終わったら、npm コマンドのパスが通っているターミナルで、次を実行します。

$ npm install -g grunt-cli

3. Grunt と プラグインのインストール

GitHub からGoogleMap のサンプルプロジェクト をチェックアウトして、このプロジェクトに移動します。

移動したら次のコマンドを実行します。

$ npm install

実行すると、Grunt 本体と package.json に定義したプラグインが node_modules ディレクトリにダウンロードされます。

$ ls node_modules 
grunt  grunt-contrib-connect  grunt-contrib-watch

4. ブラウザの拡張機能をインストール

Grunt の設定は上記で完了なのですが、LiveReload を有効にするにはブラウザに拡張機能をインストールしておく必要があります。

Chrome 版と Firefox 版のリンクを貼っておきますので、インストールしてなければこちらからインストールしてください。

5. LiveReload を実行

これで LiveReload の準備が整いました。
LiveReload を有効にするには grunt コマンドを実行するだけです。

$ grunt
Running "connect:site" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

ターミナルに表示されているように、http://localhost:9000 で起動しているので、ブラウザでアクセスすると画面が表示されます。

あとは、HTML なり JavaScript なり CSS を保存したタイミングでブラウザが勝手にリロードされます。
快適です。

6. まとめ

以上、Grunt で LiveReload を有効にするための設定でした。

手順は多いですが、基本的にインストールするだけなのでさらっとできると思います。

7. プログラムを Github に登録しました

今回の記事で使用したサンプルプログラムは Github に登録してあります。

LiveReload の実行に必要な設定ファイルも登録してありますので、すぐに LiveReload を試すことができます。

8. その他の JavaScript に関する記事

その他の JavaScript に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-twins_7039449789_mini

Underscore.js の template を使うときは HTML にテンプレートを書こう

Underscore.js の template メソッドを使った select タグ生成についての

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

icatch-plug_8436280178_mini-thumbnail

TwitterBootstrap3 用のバリデーションチェックプラグイン BootstrapValidator の導入から Live チェックまでを試してみた

BootstrapValidator は、TwitterBootstrap3 で構築したサイト用の

記事を読む

icatch-mist_mini

jQuery を使ってページの opacity を徐々に上げて fadeIn して見せる

仕事で HTML を使ってコンテンツをいくつか作成しました。 その際に他でも使い回しが効くスニペット

記事を読む

icatch-googlemap_3384984991_mini-thumbnail

住所から GoogleMap を表示するサンプル

ここ直近の2プロジェクトで緯度・経度(もしくは住所)から GoogleMap を表示する要件がありま

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-flag_1395019914_mini-thumbnail

GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する

前回アップした GoogleMaps の JavaScript API (v3) を使って地図上に複

記事を読む

icatch-load_6161289029_mini-thumbnail

Grunt の grunt-contrib-watch を使うと CPU 使用率が上がるので spawn: false を試してみた結果

grunt-contrib-watch を使うことで、ユニットテストを実行したり、サイトをリロードし

記事を読む

icatch-format_mini-thumbnail

JavaScriptなどをフォーマットするGruntプラグイン grunt-jsbeautifier を使ってみる

Java を使ってプログラムを書いているときはソースコードをフォーマットするのに、JavaScrip

記事を読む

icatch-googlemap_4866826566_mini-thumbnail

GoogleMap の Marker に InfoWindow を設定するサンプル

GoogleMap の Marker には InfoWindow を使って付加情報を設定できます。

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


5 × 一 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑