LoginSignup
74

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-12

前に、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アプリケーションなんかにも当然使えそうです。

以上です。ではでは!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
74