■BrowserSyncを使うメリットは?

このエントリーをはてなブックマークに追加

BrowserSyncはテキストエディターでコーディングする際に、結果を確認する為にブラウザーを更新して確認する、というWeb開発のワークフローを短縮するプログラムです。

BrowserSyncはファイルに変更があった際、特にブラウザを更新しなくても変更を即座にブラウザーに反映させることができます。

また、複数ブラウザーを立ち上げていてもOKなので、PC・タブレット・スマートフォンなど、複数のデバイスのレイアウトを同時に確認することが出来ます。

つまり、レスポンシブデザインなど複数のデバイスに最適化されたWeb開発をする際に、開発時間を大幅に短縮することが出来る、非常にパワフルな存在となります。

 

 

■インストール方法

1.Node.jsのインストール

 

BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。

まずは、Node.jsのサイトからインストーラーをダウンロードしてインストールしてください。

 

2.BrowserSyncをインストール

Node.jsはnpmというパッケージマネージャーでNode.jsのソフトやライブラリーを簡単にインストールできるようになっています。BrowserSyncもnpmでインストールできます。

Macをお使いであれば、ターミナル(Windowsではコマンドプロンプト)を開いて以下のコマンドを実行すればインストールできます。

npm install -g browser-sync

 

 

 

■BrowserSyncを使う

 

基本的な使い方はHTMLファイルの変更を監視して、変更を検知したら自動的にブラウザーをリロードすることです。

HTMLファイルのあるディレクトリでターミナルを開いて、次のコマンドを入力します。

browser-sync start --server --files *.html

 

 

もしCSSやJSファイルも監視対象にしたい場合は

browser-sync start --server --files "*.html, *.css, *.js"

 

 

のようにカンマ区切りで指定します。

もしくは、下記のように一括で全てのファイルを監視対象にすることも出来ます。

browser-sync start --server --files *

 

 

 

あとは、BrowserSyncが勝手に動いてくれるのでテキストエディターでの作業に集中しましょう。

高木 昭博
著者: 高木 昭博バングラデシュでオフショア開発を行っています株式会社セームページ: http://samepagenet.com/
代表取締役
昨年度、経産省/HIDA 海外グローバル人材育成インターンプログラム (現 国際即戦力育成インターンシップ)で、バングラデシュへ6カ月滞在。 現地の企業を訪問する中で、雇用システムを変革すればバングラデシュの 経済成長を促進できるという思いで、現地日本名誉総領事と合資にてIT企業設立。 現在日本からIT業務の受託を行っている。今後、携帯電話求人情報ポータルサイトをバングラデシュで設立予定。

ぜひ下記のはてブ、いいね、シェアなどを押してもらえると、毎週1回MVB(再優秀ブロガー)を決定してて、選ばれるとご褒美がもらえるのでご協力お願いします!!
このエントリーをはてなブックマークに追加