此處記錄一下踩過的坑
之前看的這個地址：http://www.browsersync.cn/ 也就是 BrowserSync的官網上面關於代理服務器的例子不管怎么試都不行
請看下例子
browser-sync start --proxy "主機名" "css/*.css"
而實際上不管怎么試都不行在git bash here 和cmd 中試了一下結果是都不行，具體情況是可以將本地服務器的地址代理到localhost:3000或者localhost:3001但是一直不能實時刷新修改的文件
后來在網上不斷的搜索，試了一下這段代碼，突然就可以了
具體代碼如下
【之前的代碼】能將本地服務器代理到localhost:3001/localhsot:3000，但是不能實時刷新效果圖如下
git bash here
cmd
保存時
轉載地址：請戳這里
BrowserSync，調試利器--自動刷新
標簽：
---恢復內容開始---
請想象這樣一個場面：你開着兩個顯示器，一邊是IDE里的代碼，另一邊是瀏覽器里的你正在開發的應用。此時桌上還放着你的手機，手機里也是這個開發中的應用。然后，你新寫了一小段代碼，按下了ctrl+s保存。緊接着，你的手機和另一個顯示器里的應用，就變成了更新后的效果。你可以馬上檢查效果是否和你預想的一致，甚至都不需要動一下鼠標...
想起來還不錯？嗯，這只是簡單地省略掉那個開發過程中會按好多遍的F5刷新。
自動刷新
“自動刷新”並不是新的概念，但對關注“可見”的預覽效果的前端開發者來說，它非常好用，可以節約很多時間。
我也不是現在才知道這個概念。在這之前，我一直在用LiveReload，它是一個名字上更明顯地寫着“自動刷新”的工具。LiveReload主要搭配瀏覽器插件使用，是很棒的自動刷新工具。
不過，現在我要介紹的是BrowserSync。你會在接下來的內容里看到，它是一個更新、更方便的開發工具。
BrowserSync
LiveReload有所不足的地方是，需要搭配瀏覽器插件。但是，插件是取決於瀏覽器的，Chrome和Firefox都有可用插件（見這頁），但IE，或者我手機上的瀏覽器，就不能這樣了。這時候只能手工向頁面里添加一段<script>代碼（其實插件也是做了這件事），而且還要記得結束后再手工移除。
BrowserSync的一般用法則不需要瀏覽器插件，也不用手工添加代碼（盡管也提供那樣的用法）。一句控制台的命令之后，無論是在手機里還是電腦，無論用多少個瀏覽器（經測試，IE8+及其它），都可以擁有自動刷新的功能。
BrowserSync是怎么做到的？請看它的安裝及使用。
安裝及使用
npm install -g browser-sync 然后，就可以開始使用了。打開控制台進入項目所在的目錄，然后輸入像這樣的命令：
browser-sync start --server --files "css/*.css" 這個命令用於純靜態站點，也就是僅一些.html文件的情況。后面的--files "css/*.css"，是指監聽css目錄中的后綴名為.css的文件。請注意這個命令里的start --server，這其實是BrowserSync自己啟動了一個小型服務器。
如果是動態站點，則使用代理模式。例如PHP站點，已經建立了一個本地服務器如http://localhost:8080，此時會是這樣的命令：
browser-sync start --proxy "localhost:8080" --files "css/*.css" BrowserSync會提供一個新地址（如未被占用的話，http://localhost:3000）用於訪問。
好了，為什么BrowserSync不需要瀏覽器插件？因為它使用了服務器的形式（直接或代理）來處理項目文件。默認情況下，訪問它的服務器上的網頁，可以看到這樣的提示簽：
這說明當前瀏覽的網頁已連接到BrowserSync。查看一下源碼，會發現它們都被添加了與BrowserSync有關的一段<script>代碼，就像LiveReload瀏覽器插件做的那樣。這些代碼會在瀏覽器和BrowserSync的服務器之間建立web socket連接，一旦有監聽的文件發生變化，BrowserSync會通知瀏覽器。
如果發生變化的文件是css，BrowserSync不會刷新整頁，而是直接重新請求這個css文件，並更新到當前頁中，效果像這樣：
顯然，這感覺更加快捷。如果你正在開發的是一個單頁應用（SPA），刷新整頁會回到初始視圖，而你又需要修改后面的某一個視圖時，這一功能尤其有用。
文件匹配
從BrowserSync的命令來看，很重要的一點就是通過--files指定需要監聽的文件。有關這里的文件匹配模式（稱為glob）的詳情，請參考isaacs‘s minimatch。
經過我自己的嘗試，如果簡單只是想要監聽整個項目，可以寫成這樣：
browser-sync start --server --files "**" 此時，BrowserSync仍然會正確地判斷文件變化是否是css。
加入到Gulp使用
Gulp是現在流行的自動化工具，但BrowserSync並沒有Gulp插件版，因為並不需要。BrowserSync有自己獨立的API，將它注冊為gulp的一個task即可。下面是一段gulpfile.js的示例：
Gulp是現在流行的自動化工具，但BrowserSync並沒有Gulp插件版，因為並不需要。BrowserSync有自己獨立的API，將它注冊為gulp的一個task即可。下面是一段gulpfile.js的示例：
var gulp = require(‘gulp‘); var browserSync = require(‘browser-sync‘); gulp.task(‘browser-sync‘, function() { browserSync({ files: "**", server: { baseDir: "./" } }); }); gulp.task(‘default‘, ["browser-sync"]); 這時候運行gulp將等同於前文的browser-sync start --server --files "**"。更多的用法示例請查看gulp-browser-sync。
完整選項
到此為止，介紹的都是BrowserSync的基本用法。在控制台里嘗試只輸入：
browser-sync
你會看到BrowserSync完整的控制台命令指南。其中可以看到有這個命令：
browser-sync init
運行它，將在當前目錄生成一個配置文件bs-config.js。
參照官方文檔修改這個文件，然后運行
browser-sync start --config bs-config .js 就將以bs-config.js的完整配置信息運行BrowserSync。
不只是自動刷新
BrowserSync並不只是一個自動刷新工具，它還有許多其他功能。默認配置下，BrowserSync會在多個瀏覽器中同步滾動條位置，表單行為和點擊事件。例如，表單行為的情形像這樣：
我覺得這是很酷的功能！想象一下桌上擺很多個不同屏幕尺寸的手機來測試的情景，你操作一個，就會帶動其他的一起！當然，這些功能還可以在不需要的時候關閉。
UI界面及其他
下面是一個BrowserSync的控制台輸出示例：
可以看到還有一個叫做UI的一個地址，它是BrowserSync提供的一個簡易控制面板。BrowserSync最常用的幾個配置選項，都可以在這個面板里調整。
在面板里面你還會發現那個經典的遠程調試工具weinre也在這：
BrowserSync目前已知的一點問題
前文提到，如果發生變化的文件是css，BrowserSync會以無刷新方式來更新，這是一個很棒的效果。如果使用scss、less等預編譯器，將監聽設置為編譯后的css文件即可。
但是，Web應用框架Rails會有一些問題。在開發環境中，css是在被請求的時候編譯（Rails一般使用sass）再返回給瀏覽器的，它只有緩存，而沒有實際的.css文件。因此，BrowserSync的文件監聽將無法指向它們，而如果指向sass文件，瀏覽器只會以整頁刷新的形式來處理。這個問題可以參見Github上的issue。
一個可行的解決方法是用其他工具替代Rails的Asset Pipeline。但在這里，我推薦另一個解決方案：使用LiveReload（LiveReload你還是有點水平的！）。經測 試，LiveReload在Rails中也可以處理好css的快捷更新。關於LiveReload做到這一點的原理，你可以閱讀Lightning-Fast Sass Reloading in Rails。
也期待BrowserSync可以在未來解決這個問題。
結語
想要在開發中更流暢，更快捷？請嘗試BrowserSync！節約一點時間，你也許就可以做到更多。
http://segmentfault.com/a/1190000002607627
---恢復內容結束---