## 前言
你經常會遇到項目代碼修改調試然后重新刷新頁面甚至清楚瀏覽器緩存的情況,下面提供一種方案為你提高下工作效率--browserSync
它不但能夠幫你實現同步代碼到瀏覽器,而且可以實現多終端同時響應操作來進行你的開發工作,那么你在微信端調試你的頁面遇到的問題或者代碼的情況,谷歌瀏覽器也是可以看到,更多特性等待你去挖掘。
## 基本了解
### 官方文檔
官網中文地址:http://www.browsersync.cn/
官網中文說明: http://www.browsersync.cn/docs/
github代碼托管地址: https://github.com/BrowserSync/browser-sync
### 優點介紹
* 交互同步
* 文件同步
* URL歷史
* 同步定制
* 遠程督察
* URL通道
* UI或命令行控制
* 瀏覽器支持
* 構建工具兼容
* 服務于任何本地站點
* 安裝并運行在任何地方
* 空閑運行并再利用
## 安裝與實現
### 安裝
``` bash
#全局安裝
$ npm install -g browser-sync
#依賴安裝
$ npm install browser-sync --save-dev
```
### 實現原理
Browsersync的工作原理是在<body>標簽之后插入初始請求的`<script async>...</script>)` 異步腳本標記, 為了能夠正常工作 `<body> `標簽必須存在。另外,您可以為使用 snippetOptions代碼段自定義規則
### 監聽靜態網站
你可以對特定的文件進行監聽,也可以對特定的文件進行監聽,如果想監聽整體的網站,那么設置--files "**",文檔模式為glob.補充說明默認所建服務器為本地3000端口并且在3001可以看到監測的同步情況。默認成功顯示的是網站根目錄index.html文件,如果沒有提示can not get錯誤。如果有提示,conneted to browserSync.
``` bash
# 啟動服務器 監聽所有的html文件
$ browser-sync start --server --files "*.html"
# 啟動服務器 監聽所有的文件
$ browser-sync start --server --files "**"
```
## 基本命令行配置
### 參數說明
* 下面只列出常用的參數,詳細的請看[官網說明](http://www.browsersync.cn/docs/command-line/)
| 參數| 說明|
| ----|----|
| --help | 輸出使用信息|
| --files | 監聽文件的匹配模式|
| --version | 版本信息|
| --browser | 選擇哪個瀏覽器應該是自動打開|
| --exclude |文件模式忽視|
| --server| 運行本地服務器(使用您的CWD作為Web根)|
| --index |指定哪些文件應該被用作索引頁|
| --proxy| 代理現有的服務器| |
| --host |指定主機名使用|
| --port |指定要使用的端口|
### 文件實例
``` bash
# 單個文件
$ browser-sync start --files "css/core.css"
# 單模式
$ browser-sync start --files "css/*.css"
# 多個文件
$ browser-sync start --files "css/core.css, css/ie.css"
# 多模式
$ browser-sync start --files "css/*.css, *.html"
# 啟動服務器 監聽所有的文件
$ browser-sync start --server --files "**"
```
### 服務器實例
``` bash
# 使用當前目錄為根#靜態服務器
$ browser-sync start --server
# 使用“應用程序”目錄的根目錄#靜態服務器
$ browser-sync start --server app
# 使用當前目錄與目錄列表根#靜態服務器
$ browser-sync start --server --directory
```
### 代理實例
``` bash
# 使用local.dev虛擬主機
$ browser-sync start --proxy
# 使用local.dev虛擬主機與港口
$ browser-sync start --proxy local.dev:8001
# 使用本地主機地址
$ browser-sync start --proxy localhost:8001
# 使用本地主機地址 子地址
$ browser-sync start --proxy localhost:8080/site1
```
### 重載選項
可以選擇重載 --files 重載,--port 端口重載 ,--url 提供完整的url重載
``` bash
# 重載http協議
$ browser-sync reload
# 重載帶端口的HTTP協議
$ browser-sync reload --port 4000 --files="*.css"
```
## Browsersync API
Browsersync API是難以置信的簡單和強大。你可以用它來創建簡單的開發任務或與其他工具配合使用完成復雜的任務。你要使用它, 只需要 require Browsersync 模塊,就像您使用其他模塊那樣。以下是常用方法的詳細說明:
### 創建方式
* .create(name) ,Type: String,可稍后用于檢索的標識符,在2.0.0+版本(推薦)這種方式創建服務 ,意味著你得到一個唯一的實例并允許您創建多個服務器或代理。
``` bash
// 創建一個未命名的實例
var bs = require("browser-sync").create();
// 創建一個命名實例
var bs = require("browser-sync").create('My server');
// 創建多個
var bs1 = require("browser-sync").create('Server 1');
var bs2 = require("browser-sync").create('Server 2');
```
### 獲取實例
* .get(name) ,可以通過名稱獲取實例。如果你有其他構建腳本在單獨的文件,這很有用。
``` bash
// 在一個文件中創建一個命名實例...
var bs = require("browser-sync").create('My Server');
// 初始化Browsersync服務器
bs.init({
server: true
});
// 現在,獲取另一個實例。
var bs = require("browser-sync").get('My server');
// 并調用它的任何方法。
bs.watch('*.html').on('change', bs.reload);
```
### 初始化服務
* .init( config, cb ) ,啟動Browsersync服務。這將啟動一個服務器,代理服務器或靜態服務器,這取決于你實際需要。
config
Type: Object [optional]
這是你的Browsersync實例的主配置,并且可以包含任何可用的選項。如果你不使用已有的配置參數,Browsersync仍將運行; 但只能在 snippet 模式下
cb
Type: Function [optional]
如果你傳遞一個回調函數,它會在Browsersync已完成全部安裝任務,并準備使用時被調用。或同步執行其他任務:當你需要等待信息(網址,端口等),這非常有用。
``` bash
var bs = require("browser-sync").create();
// 開始一個Browsersync靜態文件服務器
bs.init({
server: "./app"
});
// 開始一個Browsersync代理
bs.init({
proxy: "http://www.bbc.co.uk"
});
```
### 重載
.reload( arg ) ,該 reload 方法會通知所有的瀏覽器相關文件被改動,要么導致瀏覽器刷新,要么注入文件,實時更新改動。arg Type: String | Array | Object [optional]一個或多個文件被重新加載。
``` bash
// 瀏覽器重載
bs.reload();
// 單個文件
bs.reload("styles.css");
// 多個文件
bs.reload(["styles.css", "ie.css"]);
// 在2.6.0里 - 通配符來重新加載所有的CSS文件
bs.reload("*.css");
```
### 變化流
.stream( opts ) 該 stream 方法返回一個變換流,并且可以充當一次或多個文件。opts Type: Object [optional]
配置流的方法 (注: 至少需要2.6.0版本)
``` bash
// 編譯SASS且自動注入到瀏覽器
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('css'))
.pipe(bs.stream());
});
// 提供 `once: true` 限制每個流重裝一次
gulp.task('templates', function () {
return gulp.src('*.jade')
.pipe(jade())
.pipe(gulp.dest('app'))
.pipe(bs.stream({once: true}));
});
// 提供過濾器以被重新加載阻止不需要的文件
gulp.task('less', function () {
return gulp.src('*.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(bs.stream({match: "**/*.css"}));
});
```
### 消息提醒
.notify( msg, timeout ) 瀏覽器消息助手 msg Type: String | HTML 可以是一個簡單的消息,如“連接”或HTML
timeout Type: Number [optional]消息將保存在瀏覽器里時間設置。1.3.0版本
``` bash
var bs = require("browser-sync").create();
// 文本信息
bs.notify("Compiling, please wait!");
// HTML信息
bs.notify("HTML <span color='green'>is supported</span> too!");
// 1.3.0版本,指定超時
bs.notify("This message will only last a second", 1000);
```
### 注意事項
browsersync 對靜態網站的修改是同步的 但是對于動態網站的修改是延遲到上一次的修改
### 其他
* 更多方法參考官方文檔:[點擊跳轉](http://www.browsersync.cn/docs/api/)
- 前端工程化
- 架構總綱
- 001
- 美團技術架構
- 前端工程化說明
- 歷史背景說明
- 架構說明
- 前端工程化技術棧
- 技術文檔說明
- 功能模塊說明
- 前端模塊管理器簡介
- 框架對比分析
- vue&react&ng對比分析(一)
- vue&react&ng對比分析(二)
- vue&react&ng對比分析(三)
- 工程化專題系列
- 需要解決的問題
- 001
- 002
- 003
- 常見代碼錯誤
- jslint中常見的錯誤
- css規范常見錯誤
- html規范常見錯誤
- 工程化目錄
- 工程化初始化
- 項目構建流程
- 項目打包優化
- 上線與迭代注意事項
- 前端部署發布
- jetkins部署
- 部署需求整理
- 前端監控
- 工程化實踐指南
- dock持續部署
- 系列文章
- 插拔式前端的設計
- 其他實踐
- 工程化的前端管理
- 宋小菜借鑒
- 大前端團隊介紹
- 人員組成
- 人員發展
- 研發流程
- 任務分類
- 前端基礎建設與架構
- 技術棧以及技術方案
- 業務目錄大綱
- 前端大綱
- api管理
- 后端api工具
- 前端easymock
- api攔截與代理
- api優化
- api請求時長策略設計
- 前端架構專題
- 架構專題一
- 產品原型對接
- 與ui對接
- 圖片專題
- 圖片工程化大綱
- 圖片優化
- 圖標字體
- 圖標字體vs雪碧圖
- 工程化的前端矩陣
- 螞蟻金服前端矩陣分享
- BFF架構
- 概念解析
- 前端腳手架
- 初始化項目
- 個性化配置
- 部署與發布
- 性能優化專題
- http專題
- https常識
- http優化1
- http優化2
- http優化3
- http緩存
- 常規web性能優化攻略
- 性能優化大綱
- 樣式優化
- js優化
- 第三方依賴優化
- 代碼分割優化
- 圖片優化
- 打包優化
- 服務器優化
- 緩存優化
- 交互優化
- pc事件優化
- 手機事件優化
- 推薦文章
- 01
- 前端安全專題
- 前端安全大綱
- 前端第三方庫
- seo優化
- web框架的對比
- 001
- 學習資源
- 珠峰前端架構
- npm教程
- npm入門
- cnpm入門
- cnpm搭建
- 你該知道的js模塊
- browserSync
- opn
- js-cookie
- npm-script進階
- 入門篇
- 進階篇
- 高階篇
- 實踐篇
- yarn入門
- nodejs教程
- axios&&fetch
- xhr
- axios
- fetch
- babel專題
- babel入門
- profill入門
- nodejs入門
- 快速入門
- 大綱介紹
- node基礎
- global obj
- assert斷言
- procss-進程
- child_process子進程
- cluster集群
- console控制臺
- crypto-加密
- dgram-數據報
- dns-域名服務器
- error-異常
- events-事件
- global-全局變量
- http-基本協議
- https-安全協議
- modules-模塊
- os-操作系統
- path-路徑
- querystring-查詢字符串
- readline-逐行讀取
- fs-文件系統
- net-網絡操作
- 命令行工具
- 內存泄露
- 代碼的組織與部署
- 異步編程
- orm模塊
- 異步編程解決方案
- node-lessons
- 環境準備
- nodejs實踐
- 項目搭建
- 異步優化
- 創建web和tcp服務器
- 終端問答程序
- 爬蟲系統
- mongleDb
- mongoDB簡介
- 基本使用
- 實用技巧
- 匯總001
- 餓了么后臺搭建
- nodejs干貨
- 滬江基于node的實踐
- 蘇寧基于nodejs優化
- 基于nodejs開發腳手架
- 書籍干貨
- 深入淺出nodejs
- 異步I/O(一)
- gulp教程
- gulp入門
- gulp常用插件(1)
- gulp常用插件(2)
- gulp創建目錄
- 經驗普及貼
- webpack教程
- webpack入門
- 簡單入門
- entry配置
- output配置
- 插件使用01
- 插件使用02
- loader使用
- dev-server介紹
- 構建css
- css模塊化
- 使用less和sass
- 構建圖片
- 引入字體
- babel配置攻略
- eslint
- 001
- webpack進階
- 分不同文件檢出
- 優化打包大小
- 優化打包速度
- 自定義配置
- 單頁以及多頁如何配置
- 優化實踐
- 文章導讀
- 001
- 優化指南
- 參考列表
- webpack4
- 多入口程序構建
- 參考教程
- 項目實踐
- 環境區分
- 常見問題
- 解讀webpack
- 從vuejs權威指南中解決
- 深入淺出webpack
- rollup
- 入門
- parcel
- 入門篇
- express教程
- nuxt教程
- 入門
- 基本入門
- koa教程
- koa基本入門
- koa開發注意事項
- koa實踐指南
- 關于路由
- koa優化指南
- 001
- Vuejs
- vuejs入門系列
- vue-cli入門
- vue2基本認識
- vuejs入門教程
- 樣式綁定
- vuex入門學習筆記
- vue組件生命周期
- 組件的使用
- vue-router入門
- vue-filter
- 計算屬性使用
- 開發注意事項
- mixins
- 組件通訊
- vuejs進階
- 進階資源
- router進階
- 官網介紹
- 前進與后退優化
- keep-alive基本使用
- keep-alive原理詳解
- 鉤子函數進階
- 計算屬性&監聽&方法
- vue服務端渲染技術
- 項目實踐之路
- 實踐大綱
- 插槽專題篇
- vue-cli升級
- 進階入門
- vuejs架構
- nuxt
- vuejs項目實踐
- vue實踐常見問題
- 001
- 002
- 003
- 004
- 005
- 改造api參數探索
- 007
- 008
- 009
- 010
- 項目技術棧
- vue性能問題以及優化方案
- vue-spa應用的理解
- vue-ssr的部署與使用
- 滴滴出行實踐案例
- 2.0重構
- vue-element-admin實踐
- 準備工作
- 菜單設計
- 權限設計
- 依賴模塊
- vue-betterScroll
- 性能優化懶加載
- 京東組件實踐
- vue2項目小結
- vue探索與實踐
- 去哪實踐
- 介紹
- 餓了么項目實踐
- 項目解析
- vue骨架屏實踐
- vue生態推薦
- ui框架
- elementUI
- 001
- 002
- VUE-material
- vant-ui
- 解讀入門
- iview
- 使用問題匯總
- vux
- mint-ui
- loadmore
- vue資源導航
- vueconf
- 源碼解讀
- vm
- 雙向綁定
- 基本原理
- 數組雙向綁定
- 報錯機制
- 封裝方法
- 運行環境
- 入門
- 指令
- vue-router解讀
- util
- vue-props
- 流程邏輯
- 推薦文章
- 源碼解讀
- 文章導讀
- 001
- vuejs實戰
- 基礎篇
- 進階篇
- 實踐篇
- 面試專題
- angularjs教程
- angularjs入門系列
- 基本入門
- ng2入門
- ng進階
- ng項目實踐
- 源碼解讀
- typescript
- reactjs教程
- reactjs入門系列
- react的基本入門
- react組件
- virtalDom認識
- react-cli入門
- react組件的生命周期
- 基本知識點
- react-router教程
- react進階
- 基本實踐
- react加載性能優化指南
- react屬性封裝
- 進階45講
- 01概述
- 02jsx
- 06高階組件&函數子組件
- contextApi
- react-router
- 入門章節
- 進階
- 高階組件
- react進階組件
- 基本介紹
- render props
- render props的封裝
- render props getter
- react-native入門
- 源碼解讀
- 001
- 002-reactDemo
- 參考教程
- 參考教程1
- 了解react-hooks
- ui框架
- pc端ui框架推薦
- 項目實踐
- weatherApp
- 001
- 002
- 不同生命周期使用場景
- react項目結構和組件的命名
- 常見問題解答
- 參考書籍
- react全棧
- 前言
- react與redux進階
- 常見誤解
- 反模式
- react設計模式與最佳實踐
- 7美化組件
- 7.2行內樣式
- 7.4css模塊
- 深入react技術棧
- react學習手冊
- 序
- mobx教程
- 入門
- 大佬推薦
- 001
- react面試
- 001
- linux教程
- linux入門
- 基本入門
- 文件管理
- 文件傳輸
- 文檔編輯
- 磁盤管理
- 磁盤維護
- 網絡通訊
- 系統管理
- 系統設置
- 備份壓縮
- 設備管理
- 查看系統信息
- linux其他
- webhook
- rsync入門教程
- ssh免登陸設置
- 安裝nodejs
- nginx教程
- 入門教程
- 安裝
- 基本配置
- 服務基本使用
- 高性能nginx
- 001
- pm2教程
- shell教程
- 入門大綱
- echo命令
- 參考文獻
- linux常用命令2
- linux常見問題
- 001
- python
- 入門教程
- 機器學習
- 準備工作
- 服務器常識
- tomcat
- 入門常識
- iis
- redis教程
- 入門第一篇
- redis進階
- 項目實踐
- redis使用問題
- mongleDB
- 入門
- 使用進階
- 項目實踐
- 常見問題
- electron
- 入門系列
- 前言
- 小程序
- 入門
- 準備工作
- 路由
- 參考文檔
- 001
- 小程序開發--雙路視頻調研
- 準備工作
- 參考資源
- 參考網址
- docker
- 入門
- 基本認識
- 安裝與使用
- docker安裝nginx
- docker安裝jetkins(1)
- docker部署jenkins(2)
- 進階
- 實踐總結
- docker群分享
- docker部署前端應用
- 文章導讀
- docker其他
- 網絡安全
- 入門
- 大綱
- 項目解析
- schoolpal.web
- 功能模塊大綱
- 目錄結構大綱
- 前端國際化
- 國際化方案
- 其他
- bower入門教程
- weex
- 入門
- memcached
- 入門
- sails
- 入門