ブラウザでの開発速度を上げるツール

以前までのブラウザでの開発

エディタでコードを編集

↓

保存

↓

ブラウザのリロード

 

Browsersyncを使った開発

エディタでコードを編集

↓

保存

 

使う前なら「ブラウザのリロードが自動になっただけか」としか思いませんでしたが、これがなかなか便利でした。

 

1つのステップとは言え、サイトを作ったり、ちょっとしたプログラムを書いているときでも、変更が思い通りにいっているか確かめようと何回も確認、つまりリロードします。

いちいちマウスでリロードボタンを押すのも面倒くさくなってきます。

 

インストール方法

公式サイト参照

 

起動コマンド（静的なサイト）

正直なところ、この記事を書いた目的はBrowser syncを起動するためのコマンドの覚え書きのためです笑

いろいろ試しましたが、使っているのは2パターンくらいです。

 

ファイルを指定して変更を反映

$ browser-sync start --server --file "hoge.html"

基本的に１つのファイルの時はそのファイルのみ指定します。

 

作業ディレクトリ内のすべてのファイルの変更を反映

$ browser-sync start --server --directory --files "**/*"

ファイルの数が複数あると1つ1つ指定するのも大変です。ファイル名を”*.html”のように＊（ワイルドカード）を使って指定もできますが、それすらも面倒くさいときは、すべてをワイルドカードで指定します。

 

さらに詳しいことはこちらのサイトがわかりやすいです。

起動時のコマンド量を減らす設定ファイルの作り方やビルドシステム、タスクランナーとの連携の仕方など･･･