資訊專欄INFORMATION COLUMN
記得在學(xué)習(xí)Nodejs的時候有一個很好的Node模塊吸引了我，它能對我修改的某一個css, js 或者目錄的變化進(jìn)行監(jiān)控，然后我們可以通過瀏覽器來查看監(jiān)聽的服務(wù)下文件發(fā)生的變化！
下面我來簡單的介紹一下它 當(dāng)然我們也可以去官網(wǎng)直接找對應(yīng)的使用文檔，官網(wǎng)也是講解的非常詳細(xì)的
下面是我對Browersync使用的一個過程，希望對新手有點用處
首先BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js
npm庫中安裝 BrowserSync :
//Mac下全局安裝請在命令前加sudo npm install -g browser-sync
當(dāng)然您也可以結(jié)合gulpjs或gruntjs構(gòu)建工具來使用，在您需要構(gòu)建的項目里運(yùn)行下面的命令:
npm install --save-dev browser-sync
比如我們要對這個vue項目中的index.html 及 index.js進(jìn)行檢測進(jìn)行監(jiān)測命令如下：
監(jiān)控文件index.html 與index.js 文件的變化
browser-sync start --server -no-notify --file="index.html,index.js"
如果有更深層次文件的監(jiān)測可以使用如下命令：
browser-sync start --server --files "**/*.css, **/*.html"
當(dāng)然我們也可以對我們自己的項目開啟代理監(jiān)測 比如php類的項目：
在本地創(chuàng)建了一個PHP服務(wù)器環(huán)境，并通過綁定Browsersync.cn來訪問本地服務(wù)器，使用以下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，并監(jiān)聽其css目錄下的所有css文件。
browser-sync start --poerxy "www.fanxiao2.net" "**/."
本文轉(zhuǎn)載至? ?范駿??的博客
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50630.html
摘要：靜態(tài)服務(wù)器代理你的域名或注入通過流的方式創(chuàng)建任務(wù)流程這樣您就可以在您的任務(wù)完成后調(diào)用，所有的瀏覽器將被告知的變化并實時更新因為只在乎您的在編譯完成后注意后調(diào)用重載。 方法一 使用Google Chrome DevTools 方法二 工作區(qū)Browsersync 安裝 Node.js BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先...
摘要：打開您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個本地服務(wù)器并自動打開你的瀏覽器后訪問地址，這一切都會在命令行工具里顯示。 自己寫標(biāo)簽： 實時刷新、 免F5、 gulp + browser-sync 開門見山，首先講明一下本文的定位吧：寫這篇文章是因為自己在平時的學(xué)習(xí)中，一次次試驗了很多的前端實時刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸...
摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務(wù)開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。 源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...
摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務(wù)開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。 源碼地址：https://github.com/silence717/angular-gulp-seed 創(chuàng)建一個空文件夾名字任意，此項目為angular-gulp-seed mkdir angu...
摘要：是一個同步多瀏覽器頁面測試工具。有了它，你不用在多個瀏覽器間來回切換，不斷刷新來看效果了。更神奇的是你在一個瀏覽器中滾動頁面點擊按鈕等用戶行為也會同步到每個瀏覽器中。官方的視頻演示。 BrowserSync 是一個同步多瀏覽器頁面測試工具。 BrowserSync makes your tweaking and testing faster by synchronising file ...
閱讀 3318·2023-04-25 18:43
閱讀 989·2021-11-24 09:39
閱讀 1417·2021-10-14 09:43
閱讀 3967·2021-09-22 15:58
閱讀 2060·2019-08-29 17:18
閱讀 482·2019-08-29 14:14
閱讀 3139·2019-08-29 13:01
閱讀 1672·2019-08-29 12:33
