Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

以上です。ではでは!

8845musign
UIを作りたい
willgate
ウィルゲートが理想とする社会は、一人ひとりが自身の『will(意志、想い、やりたいこと)』を実現できる社会です。
https://willgate.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした