Sublime Textから変えられないエンジニアの岸本です。

入れておくと便利なので、コーダーさんも是非導入をオススメします！
黒い画面が苦手って方は、頑張って慣れてください(｀・ω・´)

Browsersyncってなに？

Browsersyncは、指定したファイルを監視して、ブラウザ側を自動で更新処理をしてくれるツールになります。
毎回、コード書いてブラウザをリロードして、またコードを書いてリロードをしてって面倒じゃないですか？
そんな面倒な動作を自働化してくれる凄いツールなので、是非導入して楽しようね！！

前提

前提条件として、Node.jsとnpmがインストール済みであることが必須条件です。
また、macOS Sierraで実行しています。

インストールが済んでいない方は、Node.jsからダウンロードしてインストールをしましょう。

インストールが完了するとnpmも使えるようになります。

Browsersyncのインストール

まずは、公式サイトに行きます。
Browsersync – Time-saving synchronised browser testing

すると、トップページにnpm install -g browser-syncと書いてある部分がありますので、コピーして「ターミナル」に貼り付けてreturnを押してインストールをしてください。

インストールが完了したら、こんな感じの画面になったと思います。
ターミナルの見た目はカスタマイズしているので、デフォルトの見た目とは違います。

インストールが完了したらターミナルを再起動して、適当にデスクトップでもいいのでフォルダーを作成します。

以下のコマンドは、1発でフォルダからファイルまで作成して、作成したフォルダの位置まで移動します。

cd ; mkdir ~/Desktop/sample1 ; cd ~/Desktop/sample1 ; touch index.html ; echo "<h1>Hello world</h1>" >> index.html

コマンドを実行した方は、デスクトップにsample1ディレクトリにindex.htmlを作成していますので、エディターでindex.htmlを開きます。

Browsersyncを使ってみよう

これで一通り準備ができたので、Browsersyncを使っていきましょー。

先程のファイルがある位置で、コマンドを実行します。
コマンドは公式サイトのDocumentationのページに行き、Command lineページに記載されているので、詳しく知りたい方はそちらを見てね。
Browsersync Command Line Usage

ここでは、自分がちょっとしたときに使うぐらいなので、1つだけ覚えれば何とかなります。

以下のコマンドで、今いる位置のHTMLファイルを監視して、更新があった場合に自動でリロードを行ってくれます。

$ browser-sync start --server --files="*.html"

コマンドを実行すると、以下のようになり、自動でブラウザを開いてくれたと思います。
ブラウザが開かなかった場合は、ターミナルに出力されている
Local: http://localhost:3000
External: http://192.168.0.10:3000
のどちらかのURLをコピーして直接開いてください。
（IPアドレスは環境により違います）

$ browser-sync start --server --files="*.html"
[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.10:3000
 -----------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -----------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

画像のように、Hello worldの文字が表示されるかと思いますが、このHello worldの文字を変更してみてください。
すると、変更したと同時にブラウザ側が更新されたはずです。

ここまで出来たらあとは、エディターのほうに集中できますね。

終了するときは、ターミナル上でCtrl + Cで終了できます。

下層ディレクトリのファイルも監視してみる

先程は、同じ階層のHTMLのみでしたが、以下のコマンドを入力して実行すると下層ディレクトリと複数ファイルを監視できるようになります。

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

これで、CSSとJSのファイルも監視できるようになりました！

いかがでしたでしょうか？
黒い画面は慣れるほかありませんが、慣れてしまえば色々できる事が広がるので、楽しくなってくると思いますよ。