Browsersync的安装及使用方法

Posted HeSh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Browsersync的安装及使用方法相关的知识,希望对你有一定的参考价值。

Browsersync介绍

Browsersync是浏览器同步测试工具,Browsersync能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面。省去手动F5的事件,更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。即在任何一设备上操作,其他设备也随之改变,大大提高了测试效率。效果图:

自动刷新

各浏览器同步测试

Browsersync安装

Browsersync是基于node.js的,所以首先确定安装了node.js。

1)Global Install(全局安装)

如果你想在任何目录的命令行中运行Browsersync ,可通过global命令进行全局安装。

npm install -g browser-sync 

2) Local Install (本地安装)

推荐这种方式来安装 Browsersync - 通过本地安装到每个项目。这种方式的可以使依赖被添加到你的package.json文件里(gulp或grunt构建方式)

npm install browser-sync --save-dev

启动 BrowserSync

如果你只需要将css文件修改后同步到浏览器里,只需要在命令行里输入即可

静态网站

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css"

监听多个类型的文件,需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

运行命令后,Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址,这一切都会在命令行工具里显示。

动态网站

如果你已经有其他本地服务器环境php或类似的,需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看。

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

比如我的项目服务是用tomcat跑起来的,访问地址是"localhost:8081",使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问localhost:8081,并监听其css目录下的所有css文件。

browser-sync start --proxy "localhost:8081" "css/*.css"

Browsersync+gulp

安装

npm install -g --save-dev gulp browser-sync

gulpflie.js代码

静态服务

//加载gulp模块
var gulp = require(\'gulp\');
//加载browser-sync模块
var browserSync = require(\'browser-sync\').creat();
var reload = browserSync.reload;
//加载sass模块
var sass = require(\'gulp-sass\');
//加载pug模块
var pug = require(\'gulp-pug\');
//加载gulp-autoprefixer模块
var autoprefixer = require(\'gulp-autoprefixer\');


/**
 * 这里静态服务器 + 监听 scss/pug/js 文件
 */
gulp.task(\'server\',[\'sass\',\'pug\'],function(){
    browserSync.init({
        server:\'./\', //这里指的是根目录,如果你的index.html在根目录下,会直接打开index页面,不然会显示Get Not,自己写路径就行
        port:8081  //默认打开localhost:3000,现在改成localhost:8081
    });
    
    //监听 scss/pug/js 文件
    gulp.watch(\'sass/**/*.scss\',[\'sass\']);
    gulp.watch(\'jade/**/*.pug\',[\'pug\']);
    gulp.watch(\'page/**/*.js\').on(\'change\',reload);
});

/**
 * 编译sass
 */
gulp.task(\'sass\',function(){
    return gulp.src(\'sass/**/*.scss\')
        .pipe(sass().on(\'error\', plugins.sass.logError))
        .pipe(autoprefixer(\'last 2 version\', \'safari 5\', \'ie 8\', \'ie 9\',       \'opera 12.1\', \'ios 6\', \'android 4\')) //这个插件是用来加浏览器前缀的
        .pipe(gulp.dest(\'./page\'))
        .pipe(reload({stream:true}));
});

/**
 * 编译pug
 */
gulp.task(\'pug\',function(){
    return gulp.src(\'jade/**/*.pug\')
        .pipe(pug({pretty:true}))
        .pipe(gulp.dest(\'./page\'))
        .pipe(reload({stream:true}));
});
/**
 * 默认运行
 */
gulp.task(\'default\',[\'server\']); 

动态服务

上面的例子中只涉及到了静态服务,但是项目中肯定是要把服务跑起来的,所以就要用到代理服务proxy

/**
 * 代理服务器 + 监听 scss/pug/js 文件
 */
gulp.task(\'server\',[\'sass\',\'pug\'],function(){
    browserSync.init({
        proxy:\'http://localhost:8081/court-digital-library-search/page/portal/portalHomepage.html\',
        port:8083
    });
    gulp.watch(\'sass/**/*.scss\',[\'sass\']);
    gulp.watch(\'jade/**/*.pug\',[\'pug\']);
    gulp.watch([\'page/**/*.js\',\'lar-ui/**/*.js\']).on(\'change\',reload);
}); 

我们项目使用tomcat跑起来的,原本tomcat的访问地址是哪里,proxy指向哪里,browser-sync会生成一个新的带自动刷新的地址。 

运行

gulp

 

以上是关于Browsersync的安装及使用方法的主要内容,如果未能解决你的问题,请参考以下文章

前端写代码自动刷新神器Browsersync

浏览器同步测试神器 — BrowserSync

使用Browsersync热更新热替换,解放F5

移动端真机调试终极利器-BrowserSync(使用方法)

BrowserSync 非常慢

Browsersync 浏览器自动刷新