目前有三種，我自己是用的第三種
1.liveSytle：這個主要是監聽css修改，是在編輯器上改和在瀏覽器上都是一樣的，即在瀏覽器上修改了樣式不用在粘貼到編輯器上，編輯器上和瀏覽器上改的是同步的
網址：http://livestyle.io/
環境：這個需要在chrome商城上下在這個插件
並且安裝前應該在編輯器上安裝livestle
具體怎么配置可以百度一下
2、livereload:這個是可以監聽css html js
網址：http://livereload.com/
本質：是監控代碼的變化，相當於頁面刷新
環境：nodejs 和 chrome商店下載插件
安裝：npm install -g livereload
啟動：在根目錄下輸入livereload即可
其他：它還有很多功能，也可以guilp編寫自己的腳本（可以查看官網）
3、Browsersync
網址：
本質：是啟動一個代理服務器，代理服務器監聽文件的變化，建立http長連接對變化的文件部分對視圖的同步
環境：nodejs
安裝：npm install -g browser-sync
啟動：安裝之后，在找到你要應用的文件的根目錄執行如下代碼
browser-sync start --proxy "localhost:9528" --files "*.scss, *.js, *.vue"
我這個是監聽了我項目中的所有scss js vue的文件，如果你不需要也可以在files后面的引號里寫上你自己的具體要監聽文件的路徑
這個命令我是用git bash打開的
參考：https://blog.csdn.net/qq_41328247/article/details/79926353
當然3000端口號是可以改的，用到了gulpjs 如需要可以參考下面的配置文檔
參考：http://www.browsersync.cn/docs/options/