gulp
BrowserSync

【gulp】【BrowserSync】 serverオプション、proxyオプションの使い分け

More than 1 year has passed since last update.

大まかな違い

server proxy
用途 静的サイト 動的サイト
ルーティング 可能 サーバーの設定に依存
使用言語の制限 html、js、cssのみ1 サーバーの設定に依存

serverオプションとproxyオプション概要

server

よく紹介されている、簡易サーバーを立てるオプションです。
さくっとコーティングデータをチェックしたいときに便利です。
ただし動的サイトはserverオプションで動かすことが出来ません。

公式マニュアル serverオプション

サンプル
gulp.task('browser-sync', function() {
    browserSync({
        server: {
          baseDir: "app",
          index: "index.htm"
        }
    });
});

proxy

serverオプションだと、phpなどを使用した、動的ページを扱うことができません。
こういった場合はproxyオプションを使用します。
proxyオプションでは、proxyで指定した環境の設定(ルーティングや使用できる言語など)は、
指定されたサーバーの設定が反映されます。

サンプル
gulp.task('browser-sync', function() {
    browserSync({
      proxy: "localhost"
    });
});

公式マニュアル proxyオプション

まとめ

html、cssで構成された静的サイトを扱う場合は serverオプションで。
動的サイトを扱う場合はproxyオプションを使用しましょう。


  1. phpを動かすプラグインが存在しますが、そこまでするなら仮想環境立ててしまったほうがいいと思います。