私の案件では、ずっとgulp v3系で作業をしていました（環境の変更は保守的です）。
この度、flutterアプリを作るためにnode.jsのバージョンをアップしたり、新規案件でv4系が必要になったりで、v4環境を作りました。
何度かエラーを繰り返しながらアップデート＆概ね問題無くgulpfile.jsを書き直したのですが、どうもBrowserSyncだけ動作しません。
ちょっとだけはまったので、誰かの為にメモしておきます。
BrowserSyncが動作しない
Reloading Browsers…は出ている
gulpを実行していて、普通にSASSのコンパイルもできますし、なんら問題無く使えるのですがBrowserSyncだけが動作しません。
- bodyタグはある
- Reloading Browsers…はターミナルに出ている
bodyタグが無いと、BrowserSyncのタグが発行されないようなのでチェックしましたが問題無くあります。ソースを見て、BrowserSyncのタグもきちんと出力されていました。
しかも、HTMLファイル（性格にはPHPファイル）を保存する度に「Reloading Browsers…」は出てるんですよね。つまり、トリガーとして発動は問題無いけれど、何らかの原因でリロードに至らないというわけです。
結論
port:3000で動作させていたのが問題だったみたいです。port:8080にしたら、問題無くリロードするようになりました。
const browserSyncOption = {
port: 8080,
// port: 3000,
proxy: "staging.example.jp",
notify: false,
online: false,
ui: false,
reloadOnRestart: true,
};v3の時はport:3000で問題無かったのですが……。コピペやその場しのぎで対応するツケがでたのかもしれません。
何が原因かいろいろと1時間くらい躓いてしまいました。
同じ状況の方は、お試しいただければと思います。
コメント