Posted at

【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を動かすプラグインが存在しますが、そこまでするなら仮想環境立ててしまったほうがいいと思います。