フロントエンド的必須開発環境といっても過言ではない。BrowserSync導入のおはなし。
なんなんそれ
エディタで編集したときに更新を押さなくても自動でページをリロードしてくれて、さらには違うデバイス間でのスクロールやクリックの同期なんかもしてくれる。いわゆるLive Reloadができるnode.jsパッケージです。
BrowserSync公式サイト読んでもらえればわかるかと思います。
導入準備
BrowserSyncインストールにあたって必要なものがあるので揃えましょ。
僕の環境がMacなので、windowsの人は別の記事探してくださいな。あと、今回はグローバル環境にインストールしています。
Node.js をインストール
まず、BrowserSyncは上でも書いた通りnode.jsパッケージですので、node.jsが必要です。
普通にnode.js公式サイトよりダウンロード・インストールしてもいいんですが、今回は簡単にnode.jsのバージョン管理ができるnodebrewを使ってインストールしました。
ややこしい話ですが、nodebrewにはhomebrewが必要なのでそっからインストールしましょう。
homebrewインストール
homebrew公式サイトにある通りです。
Macのターミナルで
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
と入力すればインストールできます。エラーはその都度調べて解決していきましょう。もしかしたらXcodeとか必須だったかも。。。
brew --version
と入力し、homebrewのバージョンが表示されれば、インストール完了しています。
次にnodebrewインストールです
Homebrewがインストールできたらbrewコマンドを使用できるようになっているのでそちらを使用してnodebrewをインストールしていきます。
brew install nodebrew
上記でインストールできます。下記コードでバージョン確認をし、インストールできているか確認しましょう。
nodebrew -v
んでんで、やっとnode.js
nodebrewのコマンドをつかってnode.jsのインストールやバージョン変更などが簡単にできるようになったので、下記コードを参考にインストール、バージョンの設定などを行いましょう。
インストールできるバージョン一覧
nodebrew ls-remote
インストール
nodebrew install [バージョンを指定]
安定版インストール
nodebrew install stable
最新版インストール
nodebrew install latest
インストール済みのリスト
nodebrew list
使用するバージョンの指定
nodebrew use [バージョンを指定]
なんだよ、わかんねーよって人は
nodebrew install stable
で安定版インストールして、
nodebrew list
でインストールしたバージョンを確認して
nodebrew use [バージョンを指定]
でさっきインストールしたバージョンを設定してあげましょう。
node -v
でnode.jsのバージョンが表示されればOK！
ここでエラー出る人は以下試してみてください。
nodebrew setup
でnodebrewのセットアップを行い、
HOMEディレクトリにある「.zprofile」ファイルに下記を追加。
export PATH=$HOME/.nodebrew/current/bin:$PATH
これでまた下記コードを試してみてください。
node -v
動いたら次へ。。。
動かない人はごめんなさい。記事を漁って解決しましょう。
やっとこさBrowserSyncのインストール
BrowserSync公式サイトにあるコードでインストールを行います。
npm install -g browser-sync
このnpm（Node Package Manager）を使用するために、node.jsが必要なんですね。。。
これで、Macのグローバル環境へのインストールが完了です。お疲れ様でした。
Browsersyncの使い方
インストールまでが大変で、あとは使って便利を実感してください。
まずはターミナルで
cd [プロジェクトのパス]
でプロジェクトディレクトリへと移動し、
browser-sync start --server --files *
で起動します。そうすると勝手にブラウザアプリで先ほど移動したディレクトリのページが開くと思いますので、あとは同じURLで別ブラウザを立ち上げるなり、ターミナルに書かれたURLに別デバイスからアクセスすると、クリックイベントやスクロールなどが同期し、更新を押すことなくページの閲覧ができます。便利です。
–filesの後にファイルを指定してやると、特定ファイルを更新したときだけブラウザ同期なんかもできますん。
上で書いたのはHTMLしか動かないんですが
browser-sync start --proxy [PHPサーバのIP:port] --files *
と書いてやれば、phpもいけます。（phpサーバーが立ち上がってる状態です）
あとはエイリアス登録して簡単に起動できるようにしとけば、最高に捗ります！