GulpでBrowserSyncと動的ページ(PHPなど)の連携

前に、BrowserSyncについて書きました。

GulpによるLiveReload入門(Windows版)

紹介した方法ではPHPのようなサーバサイドスクリプトで動作する
動的ページをLivereloadすることはできません。

BroserSyncにはPHPやRubyなどを実行させる機能がないためです。

ですが、BrowserSyncをProxyサーバとして動作させ、XAMPPやVagrantといった
実行環境と連携させることでLiveReloadが可能となります。

前提条件

• Vagrant上ででPHPで書かれたWebアプリケーションを動作させている
• アプリケーションは http://192.168.33.10 でアクセス可能
• Vagrant上のファイルとローカルPCの間で以下のディレクトリが同期(共有)されている
  • /vagrant/html
  • /Users/8845musign/Documents/vagrant/html
    下のディレクトリを更新するとVagrantで動作しているWebアプリケーションに即時に反映(リロードではないですよ！)される

XAPMMでhttp://localhostなどのURLでアプリケーションが動作している状態でも可だと思います。（検証していませんが）

※VagrantはWinやMac上でVirtualBoxを使い、簡単にLinuxなど動かせるツールです。詳しくはググってください。

gulpfile.js

ファイルは/Users/8845musign/Documents/vagrantに配置するとします。

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

//監視するファイルのパス
var source        = "html/**/*"

gulp.task('browser-sync', function() {
  browserSync.init({
  	//Webアプリケーションが動作しているアドレス(例ではIPアドレス)
    proxy: "192.168.33.10"
  });
});

gulp.task("watch", function () {
    gulp.watch(source, reload);
});

gulp.task("default", ["browser-sync", "watch"]);

変数souceの書き方は雑です。全ファイル監視する必要はないので、あくまで参考です。

このgulpfile.jsをローカルPCで実行します。

BrowserSyncが何をやっているのか

私もあまりProxyについてよく理解していないのですが、

実際の動作はイメージするに、

1. ブラウザがBrowserSyncにアクセス
2. BrowserSyncが設定されたURLへアクセス（XAMPPもしくはVagrantなどのサーバ）へアクセス
3. サーバが出力して受けとったHTMLにLiveReloadを実行するためのスクリプトを差し込んでブラウザに送る

のような動作をしているのかと…
たぶん、サーバとブラウザの間に透過的に処理を挟んでいるのでしょう。

実験

上のgulpfile、proxyの値のみ変更しました。htmlディレクトリ以下のファイルを更新すると、BrowserSyncによって開かれたYahoo!のページがリロードされます。

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

var source        = "html/**/*"

gulp.task('browser-sync', function() {
  browserSync.init({
  	//変更
    proxy: "www.yahoo.co.jp/"
  });
});

gulp.task("watch", function () {
    gulp.watch(source, reload);
});

gulp.task("default", ["browser-sync", "watch"]);

特に意味はありませんが、自分はなるほど！となりました。

つまり

URLでアクセスできるものならなんでもLiveReloadの対象にできるので、
JavaやC#で動いているWebアプリケーションなんかにも当然使えそうです。

以上です。ではでは！