Fork me on GitHub

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]
    });
});
posted @ 2019-12-09 17:16  较瘦  阅读(2001)  评论(0编辑  收藏  举报
知识点文章整理