browsersync使用

SimonMa 發布于2019-08-01 16:36 / 3461人閱讀

記得在學習Nodejs的時候有一個很好的Node模塊吸引了我，它能對我修改的某一個css, js 或者目錄的變化進行監控，然后我們可以通過瀏覽器來查看監聽的服務下文件發生的變化！
下面我來簡單的介紹一下它當然我們也可以去官網直接找對應的使用文檔，官網也是講解的非常詳細的

官網地址：browsersync

下面是我對Browersync使用的一個過程，希望對新手有點用處

首先BrowserSync是基于Node.js的, 是一個Node模塊，如果您想要快速使用它，也許您需要先安裝一下Node.js
npm庫中安裝 BrowserSync :

全局安裝

//Mac下全局安裝請在命令前加sudo
npm install -g browser-sync

當然您也可以結合gulpjs或gruntjs構建工具來使用，在您需要構建的項目里運行下面的命令:

npm install --save-dev browser-sync

啟動browsersync 也非常簡單

比如我們要對這個vue項目中的index.html 及 index.js進行檢測進行監測命令如下：

監控文件index.html 與index.js 文件的變化

browser-sync start --server -no-notify --file="index.html,index.js"

如果有更深層次文件的監測可以使用如下命令：

browser-sync start --server --files "**/*.css, **/*.html"

當然我們也可以對我們自己的項目開啟代理監測比如php類的項目：

在本地創建了一個PHP服務器環境，并通過綁定Browsersync.cn來訪問本地服務器，使用以下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，并監聽其css目錄下的所有css文件。

browser-sync start --poerxy "www.fanxiao2.net" "**/."

本文轉載至? ?范駿??的博客

GPU云服務器云服務器 BrowserSync https使用oos使用本地怎么使用使用云服務器阿里云服務器虛擬主機使用使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50630.html

實時編輯

摘要：靜態服務器代理你的域名或注入通過流的方式創建任務流程這樣您就可以在您的任務完成后調用，所有的瀏覽器將被告知的變化并實時更新因為只在乎您的在編譯完成后注意后調用重載。方法一使用Google Chrome DevTools 方法二工作區Browsersync 安裝 Node.js BrowserSync是基于Node.js的, 是一個Node模塊，如果您想要快速使用它，也許您需要先...

wenshi11019 2019-08-23 15:34 評論0 收藏0
前端開發：實時刷新（及時預覽）工具小匯總，兼有gulp+browser-sync設置方法

摘要：打開您的命令行工具，進入到目錄下，運行以下其中一條命令。將創建一個本地服務器并自動打開你的瀏覽器后訪問地址，這一切都會在命令行工具里顯示。自己寫標簽：實時刷新、免F5、 gulp + browser-sync 開門見山，首先講明一下本文的定位吧：寫這篇文章是因為自己在平時的學習中，一次次試驗了很多的前端實時刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸...

villainhr 2019-08-21 10:47 評論0 收藏0
從零開始創建 angularjs-gulp-es5 項目

摘要：為了動態插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經可以在本地愉快的開發了。配置編譯任務開發完成以后代碼需要上線，繼續創建一些。有時間會加入校驗添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...

hqman 2019-08-20 12:13 評論0 收藏0
從零開始創建 angularjs-gulp-es5 項目

摘要：為了動態插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經可以在本地愉快的開發了。配置編譯任務開發完成以后代碼需要上線，繼續創建一些。有時間會加入校驗添加，添加等等。。。源碼地址：https://github.com/silence717/angular-gulp-seed 創建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...

hedzr 2019-08-01 15:56 評論0 收藏0
BrowserSync -- 你值得擁有的多瀏覽器測試工具

摘要：是一個同步多瀏覽器頁面測試工具。有了它，你不用在多個瀏覽器間來回切換，不斷刷新來看效果了。更神奇的是你在一個瀏覽器中滾動頁面點擊按鈕等用戶行為也會同步到每個瀏覽器中。官方的視頻演示。 BrowserSync 是一個同步多瀏覽器頁面測試工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...

ZweiZhao 2019-05-29 16:20 評論0 收藏0