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 をインストールします。
インストーラーが用意されているので、osに対応したものをインストールしてください。

※「Node.jsって何？」という方
　要はjsという名前がついているとおり、JavaScriptです。
　なんかすごいJavaScriptで、BrowserSyncを動かしてくれる基礎、と思っておけば今は構いません。

ターミナルを開きます。

コピペで以下を貼り付けて、エンターを押します。

npm install -g browser-sync

macでエラーが出た場合は以下で試してください。

sudo npm install -g browser-sync

npm というのは、node package managerの略です。
ターミナルでの操作に慣れていないと違和感があるかもしれませんが、
これを叩くだけで、browsersyncに必要なものがパソコン上に落ちてきます。

-gという単語にも意味はあるのですが、ここでは省きます。
（もし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になります。

二つアドレスが出ていると思いますが、上部のExternalのアドレスを閲覧してください。
ちなみに、下部は設定画面のurlです。
（スクロール同期するとかしないとか、そういうの）

※ファイアウォールの関係で、同じネットワークにいても上手く取得できないときもあります。

インストールは完了したので、以降は　BrowserSyncを起動する　の項だけで
いつでもBrowserSyncを使えます。