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中去就可以了，这是手机打开的页面：
点击相应链接就可以打开相应文件了，在pc上编辑，保存就能在手机上看到自动刷新的界面，貌似手机和电脑要在局域网内，否则不能访问。
还有很多细节不是很懂，先写到这里，以后再更新。
