Browser-Sync

---

title: Browser-Sync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

安装依赖与Nodejs，所以要先安装Nodejs，然后用下面命令行来安装browsersync:

npm install -g browser-sync

-g是表示全局模式，这是安装界面

安装过程

安装完成后就可以使用了

使用之前，要进入到文件所在的文件夹，我的文件目录是E:\html\Browser-sync\，输入命令行：

e:/html/Browser-sync/

然后用命令行打开browsersync：

browser-sync start --server --files "**/*.css, **/*.js, **/*.html"

每次使用都有点麻烦，干脆写个批处理文件代替，新建一个txt文件，在其中写入：

browser-sync start --server --files "**/*.css, **/*.js, **/*.html"
pause

将文件保存为RunBrowserSync.cmd，再将其放在E:\html\Browser-sync\目录下，这样每次该目录下双击这个文件就行了。

我的是这样的：

目录

手机要访问的话就输入http://192.168.1.104:3000即可

运行

注意，要将你想要在手机上调试的网页也放在该目录下，我试了很多次，发现只有将文件命名为index.html才能打开，否则会在浏览器上显示这样的错误信息：

错误

可能是我还没弄好这个东西，暂时先不管了，等以后有空再来弄，先运行再说。

不过每次去改文件的名字也麻烦，改完了测试下一个还要改回来，我就将要调试的文件放在Files文件夹下，用index.html去引用这些文件

这是我在browser-sync文件夹下那个index.html中的代码

    
    
    


        
点击相应的链接打开网页

        
        

        

        

        

        

        

        

        

        


    

将要打开的文件添加到href中去就可以了，这是手机打开的页面：

手机访问

点击相应链接就可以打开相应文件了，在pc上编辑，保存就能在手机上看到自动刷新的界面，貌似手机和电脑要在局域网内，否则不能访问。

还有很多细节不是很懂，先写到这里，以后再更新。