文件变更/浏览器刷新自动化解决方案
发布于 1 年前 作者 zexiplus 865 次浏览 来自 分享

文件变更/浏览器刷新自动化解决方案

笔者最近在开发比较传统的项目, 文件杂糅比较多 php, html 各种都有. 当然不能用webpack热刷新, 又觉得手动刷新比较麻烦, 就顺便写了个监控文件夹变化, 自动刷新浏览器的node脚本 , 零配置.开箱即用 仓库地址 https://github.com/zexiplus/Automate-Refresher

顺便也请教一下大家遇到这种传统项目, 没法使用脚手架等各种自动化工具, 如何提高编码效率?

下面是 此仓库的readme

Automate-Refresher

A repository which can open and refresh your bowser when your file update

一个可以 可以在文件更新时自动刷新浏览器的小脚本

前言

习惯了现代化的web开发方式(webpack热刷新), 再做传统项目就有点不习惯。 传统web项目,有着多样的文件(php, html 等), 多种技术选型(iframe , 单页应用 等),对每个项目进行webpack 配置也是一件十分耗费精力的事情, 毕竟开发环境下加载本地文件也不消耗网络带宽, 浏览器刷新是一件十分廉价的事情。而且最近笔者的 F5 刷新键被按坏了, 在此背景下, 笔者再也不想在手动刷新浏览器来看效果了,那就借助node 的文件检测机制 和 chromix 来写一个自动刷新浏览器的小脚本吧

配置&下载

下载chrome 的 chromi 插件

此项目依赖于chromix 的谷歌插件, 需先行下载安装

Windows 系统 点击下载chromi谷歌浏览器插件并安装

Uinx 系统下载 点击下载chromix-too谷歌浏览器插件并安装

下载

npm i -g automate-refresher

运行

找到你要监控的开发目录 运行

autorefresh start

运行效果

./demo/auto-demo.gif

其他

也可以通过拷贝git仓库, 使用Automate-Refresher

git clone https://github.com/zexiplus/Automate-Refresher.git
cd Automate-Refresher
npm install

// 运行
npm start

打开demo文件夹中的index.html, 任意修改demo文件夹下的文件, 观察浏览器自动刷新

配置文件说明

  • path 为监控目录
  • index为浏览器的tab索引 第一项为0
  • deep 取值1 为深度检测, 0 为浅检测

注意事项

服务器缓存控制

在下载使用 Auto-Refresher 之前, 先修改本地服务器的缓存策略, 不然浏览器刷新没有任何意义。不同的本地服务器有着不同的配置,但是思路是一致的,就是设置服务器返回头的 Expires 字段或者 Cathe-control 字段, 这里以appache 和 node 的 httpServer为例。

  • apache

    找到 httpd.conf文件, 这个文件是 apache 服务器的主要配置文件, 修改参考如下

    # 第一种方法
    LoadModule expires_module modules/mod_expires.so
    ExpiresActive On
    # html文档的过期时间为 从上次访问(A)开始 10 秒钟
    ExpiresByType text/html A10
    ExpiresByType image/gif A2592000
    # HTML文档的有效期是最后修改(M)时刻后的一星期
    ExpiresByType text/html M604800
    ExpiresByType text/css N1000
    ExpiresByType text/js "now plus 2 days"
    ExpiresByType image/jpeg "access plus 2 months"
    ExpiresByType image/bmp "access plus 2 months"
    ExpiresByType image/x-icon "access plus 2 months"
    ExpiresByType image/png "access plus 2 months"
    
    # 第二种方法
    LoadModule headers_module modules/mod_headers.so
    header set cache-control "max-age=1000"
    
  • httpServer

    与 apache 服务器不同, node 的 httpserver响应头是由用户控制的, 并不是配置文件控制的。

    const http = require('http')
    http.createServer((req, res) => {
        res.setHeader('Expires', `${new Date() + 1000}`)
        res.setHeader('Cache-Control', 'max-age=10')
    })
    

协议

  • MIT
1 回复

vscode不是有Live Server插件

回到顶部