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工具官网

在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]
    });
});