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