以下、こういう感じのちょっとした検証用のコード作る時なんかに使えます。
.
├── index.html
├── index.js
└── style.css
1. Browsersyncをインストールしておく。
npm install -g browser-sync
（最近はnpmのモジュールをグローバルに入れるのは悪手だと思っているのだけれども、自分の作業用ならいいかな・・・。 ）
2. 実行する
browser-sync start --server --files='**/*.*'
コマンドを実行すると、ローカルサーバーの起動とブラウザが起動されて、現在居るディレクトリ以下のファイルが編集された時にブラウザが自動リロードされるのでほんと便利。素敵。
上の例「**/*.*」だと、全てのファイルの監視を行って自動リロードするのでファイルが多かったりすると、重かったり何度も更新されたりするかも？ でも「**/*.*」はさくっとちょろっと修正したい時なんかはおすすめ。ちなみに、browser-sync start --serverだけでもローカルサーバーとして動きます。
ワンライナー覚えたくない人向け1
便利だけれども、コマンドを毎度思い出すのは脳のリソース奪われて辛い。インストール後browser-syncとだけ打つと、ヘルプにExampleが表示されるのでそれをコピペするとちょっとだけ幸せになる。Exampleはcssの更新しか見てくれないのでそのへんは適当に自分で修正するべし。
browser-sync
以下のExampleが表示される
...
Server Example:
---------------
Use current directory as root & watch CSS files
$ browser-sync start --server --files="css/*.css"
...
ワンライナー覚えたくない人向け2
わりと頻繁にファイルを触るようなら、package.jsonのscriptsに書くと覚える事減って辛くない。
1. 「index.html」ファイルが配置してあるところにpackage.jsonファイルを作る。
こんな構成にする
.
├── index.html
├── index.js
├── package.json
└── style.css
package.json
{
"name": "piyopiyo",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start" : "browser-sync start --server --files='**/*.*'"
}
}
Macならターミナル上からディレクトリに移動して、pbpaste使ってクリップボードからファイル作ると便利すぎて失神する。
pbpaste > package.json
2. npm 経由で実行する。
npm run start
リンク
GulpからBrowserSyncを使う方法は、弊社の鹿野が記事を書いているのでこちらもどうぞ。