gulp常用插件之browser-sync使用

更多gulp常用插件使用請訪問：gulp常用插件匯總

---

browser-sync這是一個可以在多端(pc、移動、平板)實時監測文件修改，自動刷新瀏覽器的工具。其實這並不是轉給gulp使用的，在其它構建工具也可以用。

更多使用文檔請點擊訪問browser-sync工具官網。

安裝

首先這個工具是基於node環境的，可以通過npm安裝。

在命令行窗口輸入npm install -g browser-sync 全局安裝BrowserSync；

安裝完成后，可以通過browser-sync --version來查看是否安裝成功以及安裝的版本。

簡單使用

如果你要調試頁面為靜態頁面，只是單純的css、js文件或者html頁面，在當前需要調試目錄下，打開命令行窗口。

輸入命令：browser-sync start --server --files "*/*" ，這樣就會根據當前目錄啟動一個小的服務器模式，這個目錄下的所有文件只有修改，訪問的地址就會自動刷新了，是不是很簡單。

這其實是BrowserSync自己啟動了一個小服務器。

當然這只是最簡單的一種使用，更多使用文檔請點擊訪問browser-sync工具官網

啟動Browser-Sync 方式：（需要到監測的文件夾下）

靜態網站

browser-sync start --server --files "**/*.css,**/*.html,**/*.js"

動態網站

browser-sync start --proxy "主機名" "**/*.css,**/*.html,**/*.js"

注意：

• **（表示任意目錄）匹配
• 監聽多個類型的文件，您只需要用逗號隔開
• 不能是中文路徑
• 默認首頁是index.html，可以配合使用gulp/grunt等進行修改配置

在gulp中的使用

安裝命令不必過多解釋了 npm install browser-sync --save-dev

下面看看怎么使用：

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
// 本地開發代理跨域請求用的插件
const proxyMiddleware = require('http-proxy-middleware');
// 定義proxy規則，供下面創建服務使用，以/service/開頭的代理到target域名下
const proxy= proxyMiddleware(['/service/'],{target:'http://xxx.xxxx.com',changeOrigin: true});

// 靜態服務器
gulp.task('browser-sync', function() {
    browserSync.init({
		notify: false,////不顯示在瀏覽器中的任何通知。
		port: 9000,//使用（而不是一個自動檢測到Browsersync）特定端口 
		server: {
		  baseDir: ['.tmp', 'app'],//服務器的根目錄，可以一個或多個
		  routes: {//引入文件路徑替換
			'/bower_components': 'bower_components'
		  },
		  //這是代理跨域，規則上面已經定義了
		  middleware: [proxy]
    });
});