HuwaHuwa

UIUXデザイナー 松木順子

VVV gulpでBrowsersyncを動かす

約 3 分

VVVでBrowsersyncを動かしたい。

仮想環境を作ったので、あとは手を動かすだけ!
と思っていたら、gulpのBrowsersyncが動かない。。
いや、動いてはいるのですが(ターミナル上では正常に動いている表示)、ブラウザでの表示がCANNOT的なことでまっしろ。なんてことだ。動かしたい。

htmlは表示される

検証したところ、試しにindex.htmlを突っ込んだら難なく表示されました。
やっぱりBrowsersync自体は正常に動いている。

どうやらBrowsersyncのオプション設定らしい

調べたところ、オプション設定の部分がキモのようです。
いつもserver設定していた部分ですが、serverオプションだと、静的なサイト表示のみで、phpのような動的サイトは表示できないそうです。
なるほど。だからCANNNOT。

proxyオプションを使う

ここで登場するのがserverに変わるproxyオプションです。
こちらであれば、動的なサイトも表示可能です。
https://browsersync.io/docs/options/#option-proxy

VVVのlocalhostを設定する

前回の記事で作成したlocalhostのurlをproxyオプションへ設定します。
前回記事:vagrant virtualBox VVVでwordpressの仮想環境をつくる

表示を確認してみる

ここまでで設定は完了です!
では、gulpを再起動してブラウザでの表示を確認してみましょう!
いつものlocalhost:3000などで立ち上がり、表示されるはずです。

後記

静的サイトと動的サイトで設定オプションが違うのは目からウロコでした。
公式のマニュアルをチェックする癖をつければ自己解決のスピードが上がりそうです。

投稿者

フリーランスデザイナー & イラストレーター松木 順子
フリーランスのウェブデザイナーです。イラスト、ワードプレスサイト制作、UIUX設計などをやっております。 基本的には納豆とRockと酒があれば幸せです。餡子があればスキップします。
Follow :

コメントする

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Facebookへコメントする