Node.js #023 – gulpとBrowsersyncでブラウザ同期

By | 2016年6月30日

 

今回は、「gulp」と「Browsersync」でブラウザ同期する方法を紹介しようと思います。

 

node.js_016_02

 

node.js_023_01

 

作業フォルダでnpmでbrowser-syncをローカルインストールします。

 

node.js_023_02

 

gulpfile.js

 

最新のBrowsersyncでは少し書き方が違うようです。ハムさんに教えて頂きました。ありがとうございます。
※どちらの記述方法でも動きます。

gulpfile.js

 

作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。

 

node.js_023_06

 

処理が実行されると、ローカルサーバーが立ち上がり「index.html」が表示されます。

node.js_023_03

 

index.html

 

「index.html」を修正して保存するとリアルタイムにブラウザ同期され自動でリロードされます。

node.js_023_05

 

gulpとBrowsersyncを利用することにより、gulpで保存監視・Browsersyncでローカルサーバーが立ち上がりオートリロードされます。そのため、監視するファイルを指定すればファイルが更新された時点で、ブラウザが自動でリロードされます。構築内容をリアルタイムに確認することが可能になります。
今までのように手動でリロードすることがなくなります。すごく便利なツールだと思います。私は、Bracketsのライブプレビューと使い分けて利用しています。

 
 

  • 参考文献

gulp
ICS MEDIA