node.jsを知らない人を対象に書いてます。
さくっと使うためのものなので、タスクランナーには触れていません。
導入環境はmacを対象にしています。
BrowserSyncとは何か
フロントエンジニア（コーダー）の強い味方です。
やれることは大きく別けて3つです。
1. htmlやcssなどファイルを保存すると、自動的にブラウザをリロードする
**2. localhostを立ち上げるので、/style.cssとかスラッシュから始まるパスのものも読み込む **
3. 同じネットワーク下にいるデバイスとブラウザ画面を共有する（windows、mac、Android、iphone....etc）
これだけでも十分すごいですが、
さらに3に関して、BrowserSyncはもっとすごいことをやってくれます。
・スクロール同期
一つのブラウザでスクロールした分、全ての画面で同じ分だけスクロール
・ページ遷移同期
1ページ進んだら、全ての画面で1ページ進む。戻っても同じ
・フォーム入力共有
面倒くさいスマフォでのフォーム挙動確認も、PCからの入力で一発
BrowserSyncの導入
めちゃくちゃ便利なのでぜひ使っていきましょう。
少し小難しいことをしなければいけませんが、macの場合導入は簡単です。
（windowsの場合は……いつか追記しておきます）
以下macを対象に説明します。
Node.jsをインストールする
まずNode.js をインストールします。
インストーラーが用意されているので、osに対応したものをインストールしてください。
※「Node.jsって何？」という方
要はjsという名前がついているとおり、JavaScriptです。
なんかすごいJavaScriptで、BrowserSyncを動かしてくれる基礎、と思っておけば今は構いません。
BrowserSyncをインストールする
ターミナルを開きます。
コピペで以下を貼り付けて、エンターを押します。
npm install -g browser-sync
macでエラーが出た場合は以下で試してください。
sudo npm install -g browser-sync
npm というのは、node package managerの略です。
ターミナルでの操作に慣れていないと違和感があるかもしれませんが、
これを叩くだけで、browsersyncに必要なものがパソコン上に落ちてきます。
-gという単語にも意味はあるのですが、ここでは省きます。
（もしbrowsersyncをタスクランナーで使いたい、というなら必要な知識です）
BrowserSyncを起動する
ダウンロードは完了したでしょうか。
ターミナルはまだ閉じないでください。
次はターミナル上でBrowserSyncを使いたいローカルディレクトリに移動します。
cd C:\Users\～～～～～
cd とつけてbrowsersyncを試したいディレクトリのパスを叩くことで、
ターミナル上でディレクトリを移動します。
※cdの後ろには必ず半角スペースを一ついれてください。
このとき移動するディレクトリですが、
ひとまず「このディレクトリから下のファイルをリロードさせたい」という
ディレクトリの存在する場所を指定しておけば間違いありません。
移動した後は、次のコマンドを叩きます。
browser-sync start --server --files *
しばらく待つと
Access URLs:
というものがターミナル上に現れます。
と、同時にブラウザが立ち上がります。
これで成功です。
browser-sync start --server --files *
このコマンドの--files *の部分が重要で、ここで監視する対象を選べます。
「*」は全てを意味するので、cdで移動したディレクトリにあるもの全てを監視しています。
ただ全てのファイルを監視させると重いので、基本的には以下のようにしておくのが無難かもしれません。
browser-sync start --server --files "**/*/*.html, **/*/*.css, **/*/*.js"
「なんか*増えてない？」
**/*/*.拡張子
とすると、たとえ何階層下のファイルだったとしても監視してね。
という意味になります。
他のデバイスで画面同期しているかを確認する
他のデバイスでも画面を確認してみましょう。
ターミナルに出ているAccess URLs:というのが、
他のデバイスからアクセスするためのurlになります。
local: http://～～～
External: http://192.168.～～ ←このアドレスを他のデバイスで見る
-------------------------------
local: http://～～～
External: http://192.168.～～
二つアドレスが出ていると思いますが、上部のExternalのアドレスを閲覧してください。
ちなみに、下部は設定画面のurlです。
（スクロール同期するとかしないとか、そういうの）
※ファイアウォールの関係で、同じネットワークにいても上手く取得できないときもあります。
初回インストール後の使用について
インストールは完了したので、以降は BrowserSyncを起動する の項だけで
いつでもBrowserSyncを使えます。