自动刷新浏览器网页的三方插件

目录

前言：在搭建的node项目中，每次页面，或者文件发生改动，必须要重启服务，才能看到页面效果，所以，有没有什么方法，可以在页面改动后，自动刷新浏览器网页；以下就是2个三方插件；来实现自动刷新浏览器，并且能够在不同的设备之间监听用户的交互行为，例如滚动、点击和表单输入等行为

1.node的模块browser-sync

1.1安装插件

1.2创建实例

2.node的第三方模块chokidar

1.安装chokidar

2.创建实例

---

前言：在搭建的node项目中，每次页面，或者文件发生改动，必须要重启服务，才能看到页面效果，所以，有没有什么方法，可以在页面改动后，自动刷新浏览器网页；以下就是2个三方插件；来实现自动刷新浏览器，并且能够在不同的设备之间监听用户的交互行为，例如滚动、点击和表单输入等行为

1.node的模块browser-sync

它可以创建微型node服务，来辅助本地开发；使用browserSync只用require导入项目中，就能使用了

1.1安装插件

npm install browser-sync 

1.2创建实例

let browserSync = require("browser-sync").create()

browserSync.init(config, callback) //初始化

（1）browserSync.init的config配置项是必须的，callback回调函数可选

config常用的参数

const config = {
    port: 6060, //默认3000
    proxy: "http://localhost", //代理网页地址
    files: ["src/**"], //监听的文件夹，
    middleware: [{
        route: "/api", //处理一些api接口
        handle: (req, res, next) => {
        }
    }],
    serveStatic: [ //处理静态资源
        {
            route: "/assets",
            dir: ["./tem", "./images"] //静态资源目录
        }
    ],
    https: true, //是否启用https的服务
}

browserSync.init(config)

proxy -- 必选：代理的页面地址

其余都是非必选

参考资料：https://browsersync.bootcss.com/docs/options

2.node的第三方模块chokidar

chokidar是监听当前文件夹，下面的所有子文件

1.安装chokidar

npm i chokidar

2.创建实例

const chokidar = require("chokidar");

//创建watch实例
const watch = chokidar.watch(".", {
    ignored: /(^|[\/\\])\../, //忽略.文件
    cwd: ".", //当前目录
    depth: 1, //监听深度，1表示监听一层子文件，0表示不监听子文件，可监听无穷深的层级
    persistent: true //表示是否保护进程不退出持久监听，默认值为true
})

watch.on("all", (event, path) => { //监听除了ready，error，raw以外的所有事件
    //event 触发的事件，例如：change，add，unlink等
})

watch.add("./test") //增加监听的文件
watch.unwatch("./index.js") // 不监听某个文件

watch.close() //关闭所有监听器


let allWatcher = watch.getWatched() //获取所有的监听实例

for(let key in allWatcher ) {
    console.log("path:", key); //路径，如果没有指定cwd的话，为绝对地址，有cwd的话，为相对地址
    console.log("file", allWatcher[key])
}

参考资料：https://github.com/paulmillr/chokidar