摘要:[Tool]使用BrowserSync自動刷新頁面
在前端開發的過程中，在修改了css檔，js檔，或是網頁後，又需要回到瀏覽器按下F5或Ctrl+R。雖然說有快速鍵的Support，切換頁面很方便。但是，如果要同時比對多個瀏覽器的效果，再加上視窗開太多的情況，這種切換就變得麻煩了。而且，切換畫面其實不會是太大的問題，但因為要進行切換畫面的動作，開發時的心流很容易被打斷，要回復之前的心流又要再花一段時間。
所以，一個監聽檔案的變動，然後自動刷新頁面的工具，對我們專注力的持續是非常有幫助的。目前使用了一個還不錯的工具-Browser-Sync，它是基於Node.js所開發的Open Source套件，可以跨平台的安裝在Windows, MacOS, Linux上。Browser-Sync官網首頁就有簡單的影片介紹它的功能-在修改完css檔後，即時更新多個瀏覽器的頁面，甚至可以同步進行Scroll。
安裝及使用Browser-Sync
安裝Browser-Sync
第一件事情，就是確認npm安裝了沒。如果沒有安裝，請到Node.js官網下載Node.js的安裝檔並進興安裝。安裝Node.js的過程中，會順帶的安裝npm。確認npm可以正常運作後，在Windows的環境下，開啟command line視窗，輸入
npm install -g browser-sync
這行指令是告訴npm使用全域的方式安裝Browser-Sync，這樣就可以在Command Line中使用Browser-Sync的指令了。
使用Browser-Sync
使用BrowserSync的方式也很簡單，在專案的根目錄下，輸入以下的指令
browser-sync start --server --files="./*.jsx, ./*.css"
這行指令會在該目錄執行Browser-Sync，參數--server 會開啟一個mini-web server以裝載該目錄下的html檔，並用預設的網址-http://localhost:3000以開啟瀏覽器。如果該目錄有一個index.html檔，則該mini-web server會將其當作首頁，開啟在瀏覽器中。
而--files參數則是宣告Browser-Sync要去監聽那些檔案的異動，--files="./*.jsx, ./*.css" 的意思是去監聽該目錄下的jsx檔及css檔。當那些檔案變動時，則執行瀏覽器頁面刷新的動作。
Example
在我的D槽Lab目錄下有這三個檔案: hello.jsx, index.html, style.css。
index.html是一個簡單的網頁，並且引入jsx檔以及css檔，其內容如下
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="hello.jsx" type="text/jsx"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
React.render(<HelloMessage />,
document.getElementById('app'));
</script>
</body>
</html>
hello.jsx是一個簡單的React檔，其內容如下
var HelloMessage = React.createClass({
render: function() {
return (
<div className='hello'>
<h1 >Hello world</h1>
</div>
);
}
});
style.css也很簡單的定義style的class，其內容如下
.hello{
color:green;
}
在D:/Lab目錄下執行命令 browser-sync start --server --files="./*.jsx, ./*.css"，會出現以下的回應
並開啟瀏覽器，預設載入index.html頁面。可以在頁面右上角看到Connect to BrowserSync的提示，告知該頁面已經跟BrowserSync進行連結了。
當修改任何css檔或JSX檔，都會觸發瀏覽器自動刷新頁面的動作，而且是所有瀏覽到http://localhost:3000的頁面都會自動刷新。
另外，使用瀏覽器開啟網址http://localhost:3001(可以在command line視窗看到網址提示)，會開啟BrowserSync的管理介面。裡面有些選項可以設定，可以依據自己的需要去進行設定。
BrowserSync這種工具，雖然只是很單純地幫我們減少重新刷新瀏覽器的動作。似乎沒省掉甚麼effort，但重點是讓我們持續的專注在開發上，減少分心的機會。推薦大家使用!