カテゴリー: HTML/CSS

LiveReloadの便利さを手軽に非Gruntプロジェクトでも使う方法

Grunt+LiveReloadが便利なのだけど、サーバサイドがメインのもので、
concat/cssmin/jsmin/htmlminしないのにGrunt watchするのめんどくさいですね？

と思ったら公式のReload発火アプリケーションがありました。

http://livereload.com/

LiveReload.com
LiveReload.com

2014/7/22現在WindowsはAlpha版なので無料ですが、Mac用は＄9.99なんですね…。

ともかくインストーラを手に入れて実行。

リロードの設定をする

にょろにょろとインストール実行後、

LiveReload
+addから監視したいディレクトリを指定するだけ。

例えばVagrantで共有してるhtdocsディレクトリとか。

後は、Google ChromeでリロードしたいURLを開いてから、
Gruntと連携するときにも使っていたGoogle Chrome用LiveReloadプラグインをONにすると、
指定したディレクトリ内のファイルが上書きされたタイミングでリロードされます。

試したのはWindows(v0.9.2.0 – Alpha)版なので、ディレクトリとリロードするURLの関連などは設定できないようですね。

[IE9][Opera]記述位置によってはタグを認識しない

IE9で不具合があると聞いて調べていましたらば。
普通に作っていたらまずやらないであろう、こんな書き方になっておりました。

<div id="20111120">
<option>10:00</option>
<option>11:00</option>
<option>12:00</option>
<option>13:00</option>
<option>14:00</option>
<option>15:00</option>
<option>16:00</option>
<option>17:00</option>
</div>

IE9の開発者ツール(F12押し)でDOMノード見てみると…

タグが削除されちゃったの図
optionがキレイさっぱり削除されてテキストノードになっておる。

div→selectに書き換えてみたところノードリストに出てきました。

「divの中にoptionなんて許さんで(#`Д´)」というわけですかね。
ちなみにIE9のほかOpera(11.01)でも、optionタグとして認識されない現象が起きました。

IE7/8、Safari(5.1.1)、Firefox(7.01)では意図通り動いています。

…しかし、どんな理由があってdivにしていたのだろうか…。うーん。