Gruntでlivereloadするときに気をつけるべきこと
解説系の記事だけ見てたら色々組み合わさってはまってたので整理
仮想マシンでやっているときはconnectのoptionにhostnameを追加する
そもそもconnectで静的サーバーたちあげてみたら全然アクセスできなかった。
なんでかと思ってゲストの方で
$ curl http://localhost:8000
とかするとHTMLが大量に落ちてくる。
ネットワークの設定周りを疑ったが、
そもそも別のサーバー(python -m SimpleHTTPServer)だと
閲覧できてるのでgrunt側だと判断。
READMEみたらhostnameの指定が出来ると書いてあったので、'*'にしたら見れた。
options: hostname:'*'
README読めって話ですな。
connectのkeepaliveはfalseにする
connectで接続できたっぽいので閲覧しようと思ってもサーバーがすぐに落ちてしまう。
しかもLOGにはエラーは見られなかった。
なにかなって思ったらkeepaliveをtrueにしないとだめだって書いてあったので
設定してみたら後ではまった。。。
livereloadを実行するために、regardeでファイルを監視するんだけど、
gruntでdefault taskに指定してもregardeがどうも立ち上がってくれない。
ためしに
grunt regarde
って指定して実行するとちゃんと監視してくれる。
何かなって思ったら、keepaliveをfaluseにしたらできた。
regardeが常駐してくれるからconnectでkeepaliveしなくていいんだ。。。
README読めって話ですな。
connectのあとにregardeしよう
さっきの話の続きですが、regardeを他のものよりも先に実行してしまうと、
あとのタスクを実行してくれないので、ちゃんと最後に実行しましょう。
はまりました。
ちゃんと考えましょうって話ですな。
ブラウザ拡張するならスニペットいらない
以下のようなスニペットを埋め込めと書いてあった気がするので
埋め込んでみたら拡張と競合して動きませんでした。
<!-- livereload snippet --> <script>document.write('<script src=\"http://' + (location.host || 'localhost').split(':')[0] + ':" + port + "/livereload.js?snipver=1\"><\\/script>') </script>
少なくともREADMEにあるようにlrSnippetっての設定してるならいりませんでした。
やめましょう、コードだけで判断するの。
最終的な設定
以下のようになりました。
'use strict'; path = require('path') lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet folderMount = (connect, point) -> connect.static(path.resolve(point)) module.exports = (grunt) -> pkg = grunt.file.readJSON 'package.json' grunt.initConfig connect: livereload: options: # keepalive: true hostname:'*' middleware: (connect, options) -> [lrSnippet, folderMount(connect, options.base)] regarde: fred: files: 'index.html' tasks: ['livereload'] for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-' grunt.loadNpmTasks taskName grunt.registerTask 'default', [ 'livereload-start', 'connect', 'regarde' ]
以上です。
ちゃんと原典を読んでから良く考えて組み合わせて使いましょうという話でした。
