automate-refresher
A repository which can open and refresh your bowser when your file update
Last updated 2 years ago by simple.css .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install automate-refresher 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.2.3                                ...           latest (2 years ago)

4 Versions

  • 1.2.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 5
Dependencies (5)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |