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

<!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上編輯,保存就能在手機上看到自動刷新的界面,貌似手機和電腦要在局域網內,否則不能訪問。

還有很多細節不是很懂,先寫到這里,以后再更新。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容