僕のYak Shavingは終わらない

車輪の再発明をやめたらそこには壮大なYakの群れが

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'
  ]

以上です。

ちゃんと原典を読んでから良く考えて組み合わせて使いましょうという話でした。

広告を非表示にする