はじめてのbrowserSync

はじめて使ってみて社内共有用に書いたやつを転載

###目次

- browserSyncについて
- できること
- 5分でできる簡易インストール
- 管理画面の設定
- まとめ

## browserSyncについて
Live Reloadができるnode.jsパッケージ
[公式サイト](https://www.browsersync.io/)

Adobe Edge Inspectが似たようなことできるらしいけどbrowserSyncはPCでインストールするだけで拡張機能のインストールや端末へのアプリインストールも不要
[参考：Adobe Edge Inspect](http://www.adobe.com/jp/products/edge-inspect.html)


リモートデバッグ、コード調査イメージ（画像はAdobe Edge Inspectのもの）
![a78a6dd9-f686-57de-45a5-61e0c9f5c7f2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/166550/1d086390-3cf3-ea42-4f98-0618c934738e.jpeg)




## できること
- 起動中にソースを変更するとブラウザをライブリロードして反映させる
- バックエンド依存無し、gulpなどのタスクツールとも連携しても使えるし、単独でも動作可能
- apacheとか設定しなくてもターミナルで呼べば起動してくれる
- Desktop, tablet, Mobileでブラウザの同期ができる（要wifi）


## 5分でできる簡易インストール
※nodeとnpmが使える環境であること前提

```
$ cd browsersync
```
適当なフォルダを作って移動

```
$ node -v
nodeのバージョン
$ npm -v
npmのバージョン
```
npmが使えるか確認

```
$ npm init
```

npmの設定

全部エンターでいいので終わるまでエンターするとpackage.jsonができてるので

グローバルインストールでもいいけどテストでそのフォルダ（プロジェクトにインストール）

```
$ npm install browser-sync --save-dev
```

インストールが終わったらpackage.jsonのscriptsに1行追加

```
"start": "browser-sync start --server --files='./*.html, ./*.css'"
```

```package.json
{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='./*.html, ./*.css'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.12"
  }
}

```

package.jsonを保存したはじめてみる

```
$ npm start
```

コンソール上にAccess URLが記載されてるはずなので、

```
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.100.6:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.100.6:3001
 --------------------------------------
```

**Local: http://localhost:3000**がローカル環境のアクセス先
**UI: http://localhost:3001**が管理画面のアクセス先

## 管理画面の設定
http://localhost:3001
### Overview

<img width="731" alt="9a2fcc5f-35e5-5074-087d-55e927ab7203.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/310bc001-7669-65a1-a7b8-e7ff4c5802ce.png">




1. Local
NEW TAB　ローカル [http://localhost:3000](http://localhost:3000) のURLが新しいウインドウで開く
SYNC ALL　上記URLで開いている各ブラウザ（または各デバイス）が一斉にリロード

2. External
外部（端末アクセス）向けのURL（同一ネットワーク内）でボタンの機能はLocalと同じ

3. Serving files from
rootの表記

4. Current Connections
今現在同期中のブラウザ表示

### Sync Options
<img width="837" alt="cb6faff8-904f-7602-6ee8-0a1c74dcf4d1.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/4ffcf985-b297-e987-ae8a-aa8d5e8e784c.png">


上から
コード、クリックアクション、スクロール、フォームを同期するかどうか

### Remote Debug
<img width="892" alt="a093e00b-956c-350b-f7b7-92b380e26154.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/724c9d1c-3005-da72-0d25-359339bdae16.png">


1. Remote Debugger (weinre)
2. 同期している実機端末でデバッグできる

オンにしてでる
「Access remote debugger (opens in a new tab)」をクリックすると簡易なdevelopper toolが表示される。

端末で[http://192.168.100.6:3000](http://192.168.100.6:3000) にアクセスしておくとターゲットに表示される

<img width="561" alt="aba2dd6b-d036-84af-3f59-ddb530129212.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/1e9b981b-0603-72fc-d38b-a866993c17e5.png">



デバッグしたいターゲットをクリックして

<img width="627" alt="dc3571a1-8067-3581-0496-89616babd790.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/275719b4-865a-03c6-32f7-b843534b6aa1.png">



Elementsを開いて調べたいソースを選択すると端末の該当箇所がハイライトされるので調査できる

<img width="585" alt="886b2dfe-da40-f86f-d3fb-c24443a07c42.png" src="https://qiita-image-store.s3.amazonaws.com/0/166550/943fc09f-606c-7ba7-6c12-61c3a8cbe3da.png">


※chromeのdeveloper toolのように自由にスタイルを試したりはできないけどすでに設定されてるスタイルを非表示にしたりhtml部分を書き換えたりはでき、Consoleがあるのでjsエラーなどの確認は可能


2. CSS Outlining
CSSのブロックを色分け表示

3. CSS Depth Outlining
CSSの深さで色分け（深いほうが暗い）

4. Overlay CSS Grid
ブラウザにGrid表示、オンにしたらgrid sizeとか指定もできる
　CSSがピクセル単位でずれてるの修正したいとかそういう時に使う？

## まとめ
サーバー用意される前のデバッグや、
打ち合わせで来客した中にお客さんに端末での表示を見せたり、
特定端末でレイアウト崩れてるとかjsが動かないなどの時に該当端末でデバッグできるので便利そう