使用browser-sync进行页面的实时监听

喜欢ヅ旅行 2021-09-17 00:20 295阅读 0赞

咱们在写页面的时候如果不用框架或者webpack之类的自动化工具，每次修改一个样式或者一个js，就得自己手动刷新一下页面，这对于追求高效率的我们来说是很浪费时间的，那么今天给大家来介绍一个工具—— browser-sync。  
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。  
接下来就来给大家介绍具体的使用：  
1。首先下载安装：  
npm install -g browser-sync  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]  
安装完成以后检测：  
browser-sync --version  
![在这里插入图片描述][20181113170124548.png]  
2。OK，接下来咱们就进行监听了：  
进入到需要监听的文件目录，打开命令行，执行命令：

browser-sync start --server --no-notify --files 'index.html,app/js/test.js'

（需要注意的是：这里要监听的只能是index.html，所以要监听那个文件之前先把文件名改一下，其实这样很不友好，应该有解决办法，等后续再说。）  
解释一下，首先index.html是你监听的html文件，而这里比如你要监听的是test.html，你得先将名字改为index.html，等页面开发完成之后，再将文件名改回来。后面的app/js/test.js就是说在监听你的js文件，只要这两个文件有一个修改了，那页面就会自动刷新。  
（监听时在每个文件后面加一个逗号再加一个空格，不然在多文件监听的时候，文件改动监听不上。）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/5e9546a94ed4464092da788e5f0d782d.png
[20181113170124548.png]: /images/20210813/e88e582247f74160b36cb1b38e54c59b.png