[Tips]Gruntを使った便利機能の設定・使用方法

Gruntを使った便利機能の設定・使用方法

サイトメンテナンスなどの作業時に、変更を検知して自動でブラウザをリフレッシュする通称 LiveReload の使用方法です。

手順にて 　　　　 となっている部分は、コマンドプロンプトに代表される黒い画面で操作してください。

前提条件

Node.jsをインストールしてください。

grunt-cliのバージョン0.1.9をグローバルインストールしてください。

npm install -g grunt-cli@0.1.9

設定方法

リポジトリをローカルPCにコピーします。

git clone https://github.com/html5bizj/www.html5biz.org.git

コピーしたフォルダに移動します。

cd www.html5biz.org

Gruntタスクをインストールします。

npm install --save-dev

設定は以上ですが、各ブラウザにてLiveReload用のExtentionsをインストールしておくと少し便利です。 Chromeだとここです。

使用方法

黒い画面でGrunt猪神を召還する呪文を詠唱します。

grunt

ブラウザで以下のURLを開きます。

http://localhost:9001/index.html

以上