, , ,

[Middleman 3] middleman build で Vagarant VM へ Livereload する

公開日: 2014/10/22
更新日: 2018/11/06

grunt-middleman と組み合わせて実現します。

上記に移行して middleman server を利用しなくなり、Livereload ができなくなりました。
現状の環境で設定できないか検討します。

% middleman version
Middleman 3.3.6

Contents

Gruntfile.coffee

build を行った後、grunt-contrib-watch で監視しているディレクトリの変更で着火できれば良さそうです。
Gruntfile に設定を加えます。

Gruntfile.coffee
# grunt-contrib-watch
watch:
  middlemanBuild:
    files: ['<%= dir.src %>/**/*.{scss,js,erb}']
    tasks: ['middleman:build']
    options:
      livereload: true

ブラウザの LiveReload 機能拡張 もインストール済です。

Uncaught Error: Attempting to use a disconnected port object

さっそく更新をかけてみると、Livereload されないことが確認できました。
Developer Tools を確認すると、こんなエラーが表示されています。

Uncaught Error: Attempting to use a disconnected port object

ブラウザ拡張機能を調べてみると、こんなエラーになっていました。

2014-10-16_livereload_01

こちらを見てみると、自動で探し当ててくれるとのこと。

IMPORTANT: there is no reason to worry about the port and address of your ‘remote’ server, livereload magically detect where need to restart the page. Is works for me as localhost:8080/webapp.com and 192.168.10.10/webapp.com identically

config.rb

そういえばいままで grunt & vagrant 環境で困ったことがないような。
middleman の設定ファイルを確認して activate :livereload をコメントアウトしたところ、うまく動きました。

config.rb
configure :development do
  # activate :livereload

configure :development do 内を build 時には見ないと思っていましたが、コメントアウトしないと port 35729 を占領してしまうようです。

補遺

上記とは直接関係ないですが、探索中に見つけたのでメモ。