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中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Browser-sync</title>
    <style>
        body {
            background-color: #f47d31;
            margin: auto;
            text-align: center;
            font-family: Ubuntu;
        }
        h1{
            color: #fff;
            font-size: 80px;
        }
        a {
            color: #fff;
            font-size: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
        <h1>点击相应的链接打开网页</h1>

        <!-- 将你想要打开的html放在这里 -->
        <p><a href="Files/mobile.html"></a></p>
        <p><a href="Files/index.html"></a></p>
        <p><a href="Files/wp-mobile-apps.html"></a></p>
        <p><a href="Files/"></a></p>
        <p><a href="Files/"></a></p>
        <p><a href="Files/"></a></p>
        <p><a href="Files/"></a></p>
        <p><a href="Files/"></a></p>
        <p><a href="Files/"></a></p>

    <script>
        //根据href内容生成link链接
        window.onload = function() {
            var links = document.getElementsByTagName('a');
            for (var i = 0; i < links.length; i++) {
                links[i].innerHTML = links[i].href.split('Files/')[1];
            }
        };
    </script>
</body>
</html>

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