Browser-Sync 实时可视化工具

参考链接：

https://blog.csdn.net/uikoo9/article/details/72368089?utm_source=itdadao&utm_medium=referral

https://www.imooc.com/article/14759

Browser-Sync功能简单的说就是：当修改了html，css，js等文件时，保存后浏览器自动刷新页面

【安装】

browser-sync 依赖于node环境，所以在安装前需要确定已经安装好了nodejs

进入终端，全局安装browsersync

npm install -g browser-sync

 

【静态项目使用browsersync】

 安装成功以后，cd到自己的项目文件夹下，执行以下命令,监听css html js文件的变化

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

注意一个问题:在初次尝试的时候，发现监听到了3000端口，但是修改文件发现浏览器并没有更新，后来换了一个没有中文名称的demo项目，就可以正常运行了。 

【动态项目使用browsersync】

动态项目的意思，就是用java，php，nodejs跑起来的项目，同时又想监听html，css，js的变化，

拿nodejs来说，跑起一个端口9007的项目：

然后用browsersync的proxy做代理，监听这个项目：

代码：

1	browser-sync start --proxy "localhost:9007" --files "static/**/*.css, static/**/*.js, views/**/*.html"

和静态项目的不同点是：

静态项目：用browsersync自带的server跑起来

动态项目：用java，php，nodejs跑起来，然后通过代理监听项目静态资源

【动态项目使用browsersync】

结合gulp实现实时刷新，参考：https://www.imooc.com/article/14759

大致步骤：

1.npm install -g gulp

 2.进入项目目录执行：npm init
3.作为项目的开发依赖安装gulp和Browsersync：
  npm install --save-dev gulp

  npm install --save-dev browser-sync

4.在项目根目录下新建gulpfile.js,然后在gulpfile.js中定义一个任务，启动Browsersync：

var gulp = require('gulp'); // 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。 
var browserSync = require('browser-sync').create(); // 定义一个任务，任务的名字，该任务所要执行的一些操作 
gulp.task('watch', function() { // 启动Browsersync服务。这将启动一个服务器，代理服务器（proxy）或静态服务器（server） 
    browserSync.init({ // 设置监听的文件，以gulpfile.js所在的根目录为起点，如果不在根目录要加上路径，单个文件就用字符串，多个文件就用数组 
        files: ["*.html", "css/*.css", "js/*.js"], // 启动静态服务器，默认监听3000端口，设置启动时打开的index.html的路径 
        server: { baseDir: "./" }, // 在不同浏览器上镜像点击、滚动和表单，即所有浏览器都会同步 
        ghostMode: { clicks: true, scroll: true }, // 更改控制台日志前缀 
        logPrefix: "learning browser-sync in gulp", // 设置监听时打开的浏览器，下面的设置会同时打开    chrome, firefox和IE 
        browser: ["chrome", "firefox", "iexplore"], // 设置服务器监听的端口号 
        port: 8080 
    }); 
});

5.最后在命令行中执行gulp watch，执行watch任务，就可以启动Browsersync了。这次因为设置了要打开的浏览器为chrome、firefox还有IE，会同时打开三个浏览器