1. 程式人生 > >Browsersync 瀏覽器自動刷新

Browsersync 瀏覽器自動刷新

調試 格式 load nload 自動刷新 工具 script pack pan

Browsersync 是一個很好用的工具,它可以實時監測文件的變動然後自動刷新瀏覽器,不用每次去點刷新或F5,特別在調試樣式時非常有用。

browsersync中文網 http://www.browsersync.cn/

安裝

首先安裝node.js(直接下載後安裝就行,http://nodejs.cn/download/) > 打開命令行(win+r 然後輸入cmd打開命令行)> npm install -g browser-sync (通過npm安裝browsersync,如果下載慢的話可以先安裝cnpm,$ npm install -g cnpm --registry=https://registry.npm.taobao.org,然後通過cnpm安裝 cnpm intall -g browser-sync

)

使用

在項目的文件裏打開命令行,安裝成後就可以使用browsersync的命令,格式是browser-sync start xxx

browser-sync start --server --files "*.css"  //監聽CSS文件
browser-sync start --server --files "*.css,*.js,*html" //監聽其他文件直接用逗號隔開就行,更詳細的命令可以到中文網看看

說個無關的

npm init -y 可以生成默認配置的package.json

{
  "name": "jquery-css3-circle-pop-menu",
  
"version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"browser-sync start --server \"src\" --flies \"src\" " //在scripts裏的dev,寫上運行的命令,下次就可以直接用 npm run dev 來運行,不用每次都打那麽長的browser-sync }, "keywords": [], "author": "", "license": "ISC",
"description": "" }

Browsersync 瀏覽器自動刷新