localhostをスマホ実機で確認するBrowserSync

1691 ワード
localhost BrowserSync gulp localhost テキストリンク

iPhoneなどスマホ実機でプレビュー確認したい場合、
開発中で自分だけ確認できればいい場合に使える方法をメモしておきます。
いちいちサーバーにUPするのが激しく面倒くさい…

BrowserSyncを使ってサーバーUPの手間を省いて確認できます。
Localの確認だけでなく、実機で確認できるとは便利です。

環境準備

以下の2つの方法で確認URLがわかります。

【方法1】開発PCと実機を同じWi-FiにつなぎIPアドレスにアクセス

Macの場合
IPアドレスの確認 メニュー＞システム環境設定＞ネットワーク

【方法2】TerminalでAccess URLsを確認

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.11.11:3000 ←確認URL
 --------------------------------------
          UI: http://localhost:3001 ←BrowserSync設定
 UI External: http://localhost:3001
 --------------------------------------

まとめ

今まで
コードを書く→FTPソフトで更新したファイルをすべて手動でサーバーUP→リロード→確認

BrowserSync
コードを書く→ FTPソフトで更新したファイルをすべて手動UP →ライブリロード→確認

こうなります！！

1番面倒な手動でサーバーUPの工程が無くせて時間が大幅に節約できます。便利便利