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上編輯，保存就能在手機上看到自動刷新的界面，貌似手機和電腦要在局域網內，否則不能訪問。
還有很多細節不是很懂，先寫到這里，以后再更新。
