ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

browsersyncを使ってみたら思った以上に便利だった

browsersync使ってますか?死ぬ程今更ですが、使ってみたら思ってた以上のことをしてくれた

browsersync.io

最初は更新してくれるだけだと思ってた

最初はファイルの変更検知してブラウザリロードしてくれるだけでしょと思ってたら、リロードしてくれる以上のことができた

何をしてくれたのか

  • 同じページ開いてるブラウザを全部リロード(1個だけだと思ってた)
  • 操作を同期してくれる

操作を同期してくれるとは

例えばBrowser Aでbutton要素をclickすると、Browser Bでも要素をclickしてくれる

使い方

適当にインストールする

yarn add -D browser-sync

あとはserverオプションでルートディレクトリを指定して、filesオプションで監視する対象のファイルパスを指定する

例えばpublicディレクトリをルートに、public以下が変更されたらブラウザを更新する

npx browser-sync start --server 'public' --files 'public/**/*'

これでファイルを変更するとブラウザが更新され、ブラウザ操作もそれぞれに反映してくれた🎉