browser-sync

引入

• 你們寫網頁的時候，確定都遇到這種狀況，每次用sublime寫完都要返回瀏覽器，刷新頁面，而這個工具正好解決了這個問題，提升前端開發效率，這是一個npm的包 browser-sync

browser-sync的基本使用

• 做用：文件保存一下，就會自動監視文件變化，自動刷新瀏覽器
• 打開cmd,輸入如下命令

全局安裝：npm install -g browser-sync        //-g是全局安裝

• 注意：安裝完以後，必定要切換到你要監視的項目下執行下面的代碼

　browser-sync start --server --files "*.html」      //執行完這句以後，會自動幫你打開瀏覽器http://localhost:3000

• 解釋一下 start表示啓動 --server表示已經啓動的http服務 --files後面是你要監視的文件名，*.html表示你要監視這個項目下的全部後綴爲.html的文件

• 如果你想監視指定文件，就直接寫文名就好,例如：browser-sync start --server --files "index.html ,就是把*改爲具體的

browser-sync的深刻使用

browser-sync的能力不單單如此，實現了無刷新。

• 可以作兼容性測試：對不一樣的瀏覽器，它可以同步操做，當你想要測兼容性的時候，你把全部瀏覽器都打開，放在不一樣的屏幕上，而後操做一個就能夠啦
• 這個browser-sync還有一個更實用的功能對於移動端的開發：
  • 在命令行彈出的地址，有兩個端口號，除了這個http://localhost:3000,還有一個http://localhost:3001
  • 訪問一下http://localhost:3001，就會出現一個界面，這是一個管理的後臺，點擊左側邊欄的sync options，裏面的選項是能夠選擇的，舉個例子:若是你把Scroll的按鈕關掉。那麼這各個瀏覽器之間就不會同步了
  • 能夠作移送端的調試，移動端有什麼弊端呢，咱們右鍵檢查元素，能夠看dom元素，也能夠看控制檯的輸出，
    • 可是移動端的能這麼看嗎？答案確定是不能，雖然谷歌有手機的模擬器，能夠這麼看，可是在真實開發中，確定要用真機去測試，在你測試的時候，可能會出現這樣的問題，這個在電腦上測試的ok,可是在手機上怎麼不行了呢，這就是兼容器問題，那麼，想知道特別是調樣式的時候，就想知道是哪些屬性不能夠
    • 因此這裏有一款工具Remote Debug,而後點擊第一項Remote Debugger (weinre),點擊下面的字，就會跳轉到另外一個頁面。裏面就跟瀏覽器裏面差很少，有elements,console等，你就能夠在裏面查看啦