, , ,

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

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

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

> * [grunt watch で middleman build する | deadwood](https://www.d-wood.com/blog/2014/10/17_7046.html)

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

“`prettyprinted
% middleman version
Middleman 3.3.6
“`

## Gruntfile.coffee

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

> * [grunt-contrib-connect と grunt-contrib-watch でサーバを立てて LiveReload をつかう | deadwood](https://www.d-wood.com/blog/2013/11/15_5033.html)

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

ブラウザの [LiveReload 機能拡張](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) もインストール済です。

## Uncaught Error: Attempting to use a disconnected port object

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

“`prettyprinted
Uncaught Error: Attempting to use a disconnected port object
“`

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

2014-10-16_livereload_01

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

> * [php – Live reload browser page. Grunt and Vagrant – Stack Overflow](http://stackoverflow.com/questions/21164966/live-reload-browser-page-grunt-and-vagrant)
>
> 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` をコメントアウトしたところ、うまく動きました。

“`ruby:config.rb
configure :development do
# activate :livereload
“`

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

## 補遺

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

> * [Windowsやリモート環境でMiddlemanのLiveReloadをする – Qiita](http://qiita.com/Hiraku/items/71506d0422eca51ee0e5)
> * [Middleman と GitHub Pages でブログを作った話 – daimatz.net -](http://daimatz.net/text/2014/0830-middleman-github-pages.html)
> * [Vagrant環境にLive Reloadを設定する – 麹町で働くWebエンジニアのメモ帳](http://togattti.hateblo.jp/entry/2014/09/09/233049)
[/markdown]