vagrantのサーバー上でbrowser-syncを動作させたい

Question

はじめまして！以下、投稿させていただきます。

■やりたいこと
ローカルでファイルを修正し、vagrant側のサーバー上でその更新を感知してライブリロードさせたい
※修正ファイルはhtml, css, js, phpなどフロントに関するものです

■環境など
□ローカル側
・デスクトップPC（windows7）
・Desktop/.../vagrant/build/

□vagrant側
・Webサーバーを用意（centos+apache）
・192.168.33.10でブラウザ、sftpアクセス可能
・/var/www/html/public_html/
※public_html→ドキュメントルート

■やろうとしている手順

1. ローカルでgulpを使用し、公開ファイルを/build/以下に出力する
2. そのままgulp-sftpで、vagrant（192.168.33.10）の.../public_html/へ一式ファイルアップロードする
3. /var/www/html/public_htmlと同じ並びにgulpを用意し、gulpを使ってbrowser-syncを使用できるようにする
4. gulpで/public_html/以下のファイルを監視し、更新があればbrowser-syncを発動させる
5. ブラウザで192.168.33.10へアクセスし、ライブリロードを確認する

■困っていること■
上記4までは上手く行っているようなのですが、肝心のブラウザでのライブリロードを確認することができません。
※gulpのログ（vagrant ssh > gulp）には、変更に応じてReloading Browsers...と表示はされていきます

---

<質問1:>
自分ではゲストOS/ホストOSのネットワーク周りの設定が不足しているのかなと思いはしますが、あまりその方面の知識が無いため、何をどう確認・設定してよいか検討が付きません。なにか怪しそうなところ、お分かりになりそうなことはありますでしょうか。。。

<質問2:>
やりたい動作が確認できていないのにアレですが、sftpでファイルを一括で送ると、かなりのファイル数が変更された！と見なされるかと思います。その度browserSyncが発動すると処理が重くなるのかとの心配もあります。ファイル送信が全て終わったらそこで１回のみreloadを実行する、もしくはreloadは連続して実行はさせない、といった処理は可能なものでしょうか。

どうぞよろしくお願いいたします。

なお実行しているgulpfile.jsは以下の様なものです

var gulp        = require("gulp");
var browserSync = require('browser-sync');
var reload      = browserSync.reload;

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html/"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default',['browser-sync'], function() {
    gulp.watch("./public_html/**/*", ['bs-reload']);
});

Answer 1

自己解決したのでメモしておきます。

■質問1: vagrant上でライブリロードを実現させる

gulp.task("server", function() {
  browserSync.init({
    host: "192.168.33.10",
    open: false
  });
});

上記実行すると、browser-sync-client.xxx.jsを読み込めと言われるので
素直にhtmlに提示されたスクリプトを追加

■質問2: 連続して発生する処理の負荷を抑えたい

setTimeoutを使って連続処理を間引く

gulp.task("watch", function() {
  var timer;
  gulp.watch('監視するファイル').on("change", function() {
    clearTimeout(timer);
    timer = setTimeout(function () {
      // リロード処理
    }, 200);
  });
});

参考
http://webamb.com/javascript/1275.html

Answer 2

vagrantの共有フォルダの設定で
ホストOSのbuildフォルダが
ゲストOSのpublic_htmlになるように設定し、
browserSyncでproxyの設定をすればご希望の動作をするのではないかと思います。

Comments

[t-book]

回答ありがとうございます！
すみません、情報が不十分でした。

vagrantの共有フォルダはかなり遅く処理に時間が掛かってしまい、今回のケースでは使い物にならなかったため、このようなsftpで送る方法を取りました。
またvagrant1.5から使えるrsync-autoも試してみましたが（わざわざwindowsPCにrsyncをインストールしました...）、以下事情により断念しました。

　　・現状rsyncはホスト→ゲストの一方通行
　　・/public_html/中にサーバーから"も"出力されるファイルが入ってくる
　　・ローカルと同期されると、ファイルが消えてしまう
　　→＼(^o^)／

またbrowserSyncのproxyオプションも試してみましたが（sftpの場合でですが）
上手く動作しませんでした。

proxy : '192.168.33.10' // この記述が間違っているのかもしれませんが...

どうぞよろしくお願いします。