BrowserSync 測試多個平台

1. 1. Install Node.js

   BrowserSync is a module for Node.js, a platform. for fast network applications. There are convenient installers for MacOS, Windows and Linux.51Testing软件测试网UIp3Sy7|

2. 2. Install BrowserSync

   The Node.js package manager (npm) is used to install BrowserSync from a repository. Open a terminal window and run the following command:

   Wu,Lt#h0

   npm install -g browser-sync

   You’re telling the package manager to download the BrowserSync files and install them globally so they’re available to all your projects.51Testing软件测试网l8xV @-L3iHZp

3. 3. Start BrowserSync

   A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:

   :eK
   Q%V@n0f\E0

   Static sites

   If you’re only using .html files, you’ll need to use the server mode. BrowserSync will start a mini-server and provide a URL to view your site.51Testing软件测试网)Z ltw_!wv

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

   Dynamic sites

   If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. BrowserSync will wrap your vhost with a proxy URL to view your site.51Testing软件测试网CE4S`h&Ped$j)i

   browser-sync start --proxy "myproject.dev" --files "css/*.css"

[8R)V C/i051Testing软件测试网g/o^#vvaA E

BrowserSync 是用 node.js 寫的工具，可以同時測試一堆 device，修改後不用按 reload，印象中已經有套件可以做類似的事情？51Testing软件测试网&tmG[B.J

一般用 npm 裝就可以了：51Testing软件测试网&Mn,o9lF-q#m

npm install browser-sync

最簡單的方法是直接執行 browser-sync，執行後會出現像這樣的訊息：51Testing软件测试网/F3y yE$?i1Y

<script. src='//192.168.1.1:3000/socket.io/socket.io.js'></script>
<script>var ___socket___ = io.connect('http://192.168.1.1:3000');</script>
<script. src='//192.168.1.1:3001/client/browser-sync-client.0.6.0.js'></script>

把這段程式碼貼到 body 的最後面就可以了，當 BrowerSync 偵測到檔案有更新時會透過 server push 機制重刷頁面。

另外，也可以產生 bs-config.js 修改設定：51Testing软件测试网KXx
nPz

browser-sync --init

更完整的說明可以從「Options」這頁找到。