Bootstrap 3をWebページ制作環境にしよう(2) LiveReloadの実現
前回の事前準備ができましたら、今度はLiveReloadできるようにしましょう。
WebブラウザへLiveReload用拡張を追加
How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しておきましょう。
grunt側でLiveReloadの設定
BootstrapのGruntfile.jsを見るとgrunt-contrib-watchを使っていますので、grunt-contrib-watchしてれば簡単にLiveReloadできるに書いたように、grunt-contrib-watchのオプションで簡単にLiveReloadできちゃいます。
今回は、とりあえずLiveReloadを動作させるということで、以下のようにします。
- トップディレクトリ配下にtest.htmlを作成
- cssやjsはdist配下のものを使用
- test.htmlが更新されたらLiveReloadされる
1,2に合わせたHTMLファイルは以下のような感じです。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"> </head> <body> <h1>LiveReload</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Gruntfile.jsのwatchの部分を以下のようにしましょう。
watch: { /* 略 */ recess: { files: 'less/*.less', tasks: ['recess'] } }, /* 以下htmlを追加 */ html: { files: 'test.html', tasks: [], options: { livereload: true } } }
そして、grunt.registerTask()を実行しているあたりで、ローカルにサーバ起動しつつwatchを実行するgruntタスクを追加しましょう。ローカルでサーバを起動するconenctはすでにありますので、それを使って。今回はwatchreloadというタスク名にします。
grunt.registerTask('watchreload', ['connect', 'watch']);
LiveReload実施
トップディレクトリで以下のコマンドを実行し、作成したwatchreloadタスクを起動しましょう。
$ grunt watchreload
Webブラウザで http://localhost:3000/test.html を開くと、先ほど作成したHTMLファイルを開くことができるはずです。
そして、WebブラウザにインストールしたLiveReload拡張を有効にして(デフォルトのポートは35729です)、test.htmlを書き換えると、自動でWebブラウザが再読込され、変更した内容が表示されるはずです。LiveReloadが実現できました!
次回は、この環境をベースに、効率的にBootstrapを用いたサイトを作成できるようにしましょう。