- 简介
- 功能
- 使用说明
- 可用的命令、选项
- 配置文件说明
- 示例
- 注意事项
- 工作原理
一款无侵入、可插拔的静态资源 (js/css) 代理服务器。
- 为被代理的静态资源添加本地服务的 Host
- 如果
combo的资源有被代理资源,则会将被代理资源自动拆分并添加本地服务的 Host,便于独立文件调试 - 被代理的静态资源会自动去除
.min和尾部时间戳
gfe-proxy 可以作为命令行工具使用,也可以作为模块使用。
- 首先全局安装
gfe-proxy
npm install gfe-proxy -g
- 进入被挂载静态资源目录,启动
gfe-proxy
gfe-proxy start
- 在被 debug 页面的请求路径后添加参数
debug=1,符合条件的静态资源即被代理
- 首先安装
static-proxy到你的项目中:
npm install static-proxy --save
- 在你的 nodejs 脚本中时可以这样写:
var gfeProxy = require('gfe-proxy'); // config 对象请参照上面的 gfe-proxy-config.json 格式 gfeProxy.init(config);
`start` 启动 gfe-proxy
`stop` 停止 gfe-proxy
`-h` or `--help` 显示帮助信息
友情提示:请自己需求修改
{ //被调试页面的Host集合 "debugPageHosts": ["gome.com.cn", "atguat.com.cn", "gomeprelive.com.cn"], //是否开启静态server "staticServer":true, //本地静态server的hostName "staticServerHostname": "127.0.0.1", //本地静态server的端口(本地Server指挂载本地目录的 Server) "staticServerPort": "10000", /** * combo示例: http://hostname:80??foo/bar.css,foo/baz.css */ //被调试页面是否使用combo来合并js/css文件 "combo": true, //combo的url的分隔符 "comboUrlSplit": "??", //combo的查询分隔符 "comboQuerySplit": ",", /** *注意:目前仅支持以下两种挂载场景 *1、请求地址和本地文件层级一致 * 例如: * (1)本地挂载文件夹css * (2)文件位置css/foo/bar.css * (3)线上地址<link ref="stylesheet" href="//hostname:80/css/foo/bar.css"> * 配置参考: * cssMountFolder: "css", * cssUrlUniqueSubstr: "css/", *2、请求地址包含本地文件层级 * 例如: * (1)本地挂载文件夹css * (2)文件位置css/foo/bar.css * (3)线上地址<link ref="stylesheet" href="//hostname:80/gmlib/2.0.0/xxx/css/foo/bar.css"> * 配置参考: * cssMountFolder: "css", * cssUrlUniqueSubstr: "gmlib/2.0.0/" */ //是否开启对css文件的代理 "cssProxy": true, //挂载css的本地文件夹 "cssMountFolder": "css", //能够标识出线上js路径的唯一子串,作为过滤条件使用。可使用文件夹开头的地址,例如:gmpro/2.0.0/ "cssUrlUniqueSubstr": "gmpro/2.0.0/", //是否开启对js文件的代理 "jsProxy": true, //挂载js的本地文件夹 "jsMountFolder": "js", //能够标识出线上css路径的唯一子串,作为过滤条件使用。可使用文件夹开头的地址,例如:gmpro/2.0.0/ "jsUrlUniqueSubstr": "gmpro/2.0.0/" }
-
调试页面信息及目标需求
- 请求地址
http://tuan.gome.com.cn/?intcmp=sy-1000000378-1- 源码内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//css.gomein.net.cn/??gmlib/reset/1.1.0/reset.css,gmpro/1.0.0/public/1.0.0/css/top.min.css,gmpro/1.0.0/public/1.0.0/css/foot.min.css,gmpro/1.0.0/public/1.0.0/css/aside.min.css?v=201612151835,gmpro/2.0.0/cheap/groupon/1.0.0/css/common.css,gmpro/2.0.0/cheap/groupon/1.0.0/css/index.css"> </head> <body> ... <script src="//js.gomein.net.cn/??gmlib/jq/1.7.1/jquery.js,gmlib/cookie/1.0.0/cookie.js,gmpro/1.0.0/public/1.0.0/js/signtop.min.js,gmlib/unit/bigcode/1.0.0/bigcode.min.js,gmpro/1.0.0/public/1.0.0/js/foot.min.js,gmpro/1.0.0/public/1.0.0/js/aside.min.js?v=201612151835,gmlib/unit/g/1.0.0/g.min.js,gmlib/ui/arttemplate/2.0.4/template.min.js,gmlib/ui/arttemplate/2.0.4/template-simple.min.js,gmlib/ui/gslider/1.0.2/gslider.min.js,gmlib/unit/gtime/1.0.0/gtime.min.js,gmpro/2.0.0/cheap/groupon/1.0.0/js/common/common.js,gmpro/2.0.0/cheap/groupon/1.0.0/js/common/collection.js,gmpro/2.0.0/cheap/groupon/1.0.0/js/common/recentlyBrowse.js,gmpro/2.0.0/cheap/groupon/1.0.0/js/index/cheapIndex.js,gmpro/2.0.0/cheap/groupon/1.0.0/js/index/cheapSolid.js"></script> </body> </html>
-
目标:将
gmpro/2.0.0开头的 js/css 从 combo 串中拆分并代理到本地 Server -
挂载静态资源的根目录为 css、js (需要在 groupon 目录中启动 gfe-proxy)
-groupon -css -js -
进入 groupon 目录下,启动 gfe-proxy
gfe-proxy start
- 在访问 debug 页面的 url 后追加参数
debug=1
http://tuan.gome.com.cn/?intcmp=sy-1000000378-1&debug=1
gmpro/2.0.0开头的 js/css 即被代理到本地,(可以修改本地文件进行调试了)源码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="//css.gomein.net.cn/??gmlib/reset/1.1.0/reset.css,gmpro/1.0.0/public/1.0.0/css/top.min.css,gmpro/1.0.0/public/1.0.0/css/foot.min.css,gmpro/1.0.0/public/1.0.0/css/aside.min.css?v=201612160924"> <link rel="stylesheet" href="//127.0.0.1:10000/css/common.css"> <link rel="stylesheet" href="//127.0.0.1:10000/css/index.css"> </head> <body> ... <script src="//js.gomein.net.cn/??gmlib/jq/1.7.1/jquery.js,gmlib/cookie/1.0.0/cookie.js,gmpro/1.0.0/public/1.0.0/js/signtop.min.js,gmlib/unit/bigcode/1.0.0/bigcode.min.js,gmpro/1.0.0/public/1.0.0/js/foot.min.js,gmpro/1.0.0/public/1.0.0/js/aside.min.js?v=201612160924,gmlib/unit/g/1.0.0/g.min.js,gmlib/ui/arttemplate/2.0.4/template.min.js,gmlib/ui/arttemplate/2.0.4/template-simple.min.js,gmlib/ui/gslider/1.0.2/gslider.min.js,gmlib/unit/gtime/1.0.0/gtime.min.js"></script> <script src="//127.0.0.1:10000/js/common/common.js"></script> <script src="//127.0.0.1:10000/js/common/collection.js"></script> <script src="//127.0.0.1:10000/js/common/recentlyBrowse.js"></script> <script src="//127.0.0.1:10000/js/index/cheapIndex.js"></script> <script src="//127.0.0.1:10000/js/index/cheapSolid.js"></script> </body> </html>
- 如果执行
gfe-proxy的目录下没有gfe-proxy-config.json文件,则会自动创建,请根据自己需求修改后,重新启动即可 - 请使用
Ctrl+C组合键来停止gfe-proxy - 异常关闭
gfe-proxy,会导致不能上网,解决方案有如下两个:- 打开命令窗口,执行
gfe-proxy reset命令后即可上网 - 打开IE浏览器手动清除代理,步骤如下:
转到"工具">"Internet 选项">"连接">单击"局域网设置">去掉所有"对勾"即可
- 打开命令窗口,执行
- 异常关闭指非
Ctrl+C方式停止gfe-proxy外的所有场景,如:手动关闭或任务管理器强制结束正在运行gfe-proxy的命令窗口 - 此工具只能在 windows 系统上使用,并只能监听 http 请求
- 创建用来挂载静态资源的本地
Server - 修改系统注册表,为系统设置一个正向代理:
http://127.0.0.1:17173 - 使用
koa做正向代理服务,用来过滤所有的浏览器请求 - 过滤到符合条件的请求后,去掉
debug=1拉取原始请求内容 - 得到原始请求响应内容后,解析静态资源并打上本地 Server 的 Host
- 将修改后的内容渲染到页面上,这样就实现了线上静态资源代理
如果您认为本工具不错,对你开发效率和调试效率有所提高,不妨小额赞助我一下,让我有动力继续做出高质量的工具。
赞助方式一共有两种:微信支付,支付宝支付。
赞助方式一
绝对赤裸裸的金钱赞助:如果你有微信,请打开微信,使用"扫一扫"付款。
目前一共有"0.9元"、"9.9元"、"19.9元"、"29.9元"、"土豪99"5档。
请闭上眼随意扫一扫,祝君好运!
赞助方式二
也是赤裸裸的金钱赞助:如果你有手机支付宝,请打开支付宝App,使用"扫一扫"付款。
目前一共有"0.9元"、"9.9元"、"19.9元"、"29.9元"及"土豪99"5档。
请闭上眼随意扫一扫,祝君好运!