ローカルサーバを起動するBrowsersyncを使ってみる

Browsersyncを使うと、簡単にローカルサーバを起動したり、ローカル環境のページをスマホで確認したり、ファイル更新時に自動でブラウザをリロードしたりできます。

インストール

まずはNode.jsをインストールしておきます。

インストールが完了後、コマンド プロンプトを起動してNode.jsがインストールされているか確認します。

node -v

Node.jsのバージョンが表示されてインストールを確認できたら、Browsersyncをインストールします。

npm install -g browser-sync

これで準備完了です。
　

使い方

まずは使用するディレクトリへ移動します。

cd ディレクトリパス

移動後、以下を入力してBrowsersyncを開始します。

browser-sync start --server

ブラウザが立ち上がり、http://localhost:3000/のURLでページが表示されたら成功です。

コマンド プロンプトの画面にhttp://localhost:3000/ともう一つURLが表示されているかと思います。
そちらのURLを使用すると、同じネットワーク内であれば他のパソコンやスマホからでも、ローカルで作業中のページを見ることができます。

ファイル変更時にブラウザを自動でリロードさせたい場合、Browsersync開始時に以下のように入力します。

browser-sync start --server --files "css/**/*.css"

この場合、cssディレクトリ内のcssファイルを変更したときにブラウザが自動でリロードされます。

ちなみに、文字コードがShift_jisだと文字化けしてしまうようなので注意が必要です。
　

【参考サイト】

• Browsersync – Time-saving synchronised browser testing