V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
UncleBill
V2EX  ›  分享创造

nodejs做的f5——自动刷新页面的工具

  •  
  •   UncleBill · 2013-04-23 22:01:51 +08:00 · 7667 次点击
    这是一个创建于 4259 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://github.com/UncleBill/f5

    这是个当你修改了文件后自动帮你刷新页面的工具。
    它开始是由@island205做的,被我无意中发现。到现在我已经用了有两个多月时间(也许现在我是它唯一的用户),这段日子里边用边在自己的fork上加代码,修bug……目前f5还有些bug和todo要,但还算令我满意。介绍一下它的特点:

    1.跨平台
    2.跨浏览器
    *3*.“跨机器”:通过局域网,可在另一台机子上查看页面
    4.不需要添加任何多余代码
    5.命令行操作
    6.支持多项目(可自定义端口)
    7.开源免费
    ...

    我有时候也用它来在局域网传文件……

    我知道已经有个也叫“f5“(getf5.com)的工具了,但貌似它只做到了以上特点的第1和第2条。

    如果你喜欢,欢迎使用和fork:f5还有不少bug(包括英文表达的错误)和improvment required。
    欢迎来这里头脑风暴https://github.com/UncleBill/f5/issues/3
    第 1 条附言  ·  2013-04-24 09:39:40 +08:00
    重看一次帖子,发现第三条描述得并不详细。

    所谓的“跨机器”是:局域网内,你在A电脑上(192.168.1.xxx)写代码,局域网内的其他电脑则可以访问192.168.1.xxx:3000查看页面,你在A电脑上做了修改,其他的电脑上也能看到即时的刷新。

    这点的好处是,你不需要给mac或linux安装虚拟机来测试ie,你就能一台机子写代码,另一台看效果,能同时测试多平台和多浏览器,还能分享给局域网内的其他人看(也许以后能做到多人协同)

    因为我最近比较忙,所以希望能有人一起来开发。我见过好几个类似的工具,但往往需要给浏览器安装插件或者在html内插个js,f5我最让我满意的,希望你也喜欢。
    23 条回复    1970-01-01 08:00:00 +08:00
    jasya
        1
    jasya  
       2013-04-23 22:03:39 +08:00
    页面404
    UncleBill
        2
    UncleBill  
    OP
       2013-04-23 22:04:58 +08:00
    @jasya 忘了写网址了。在这https://github.com/UncleBill/f5
    airyland
        3
    airyland  
       2013-04-23 22:06:00 +08:00
    先watch之,刚好准备写个类似的工具。
    UncleBill
        4
    UncleBill  
    OP
       2013-04-23 22:11:37 +08:00
    因为npm是@island205注册的,使用npm install -g f5 会安装他未merge我的pull request的项目。所以请使用项目的命令安装:
    sudo npm install -g https://github.com/UncleBill/f5/tarball/master
    chuquus
        5
    chuquus  
       2013-04-24 09:57:47 +08:00
    grant livereload不好吗?
    UncleBill
        6
    UncleBill  
    OP
       2013-04-24 10:26:37 +08:00 via Android
    @chuquus 那个还要给浏览器安个插件,支持的浏览器有限,而且还得开着个窗口吧?
    handaidai
        7
    handaidai  
       2013-04-24 10:44:00 +08:00
    从README上看 没有说让传path参数,那你怎么知道我要对那些目录的文档进行监控从而导致页面刷新?

    从源码上看 你好像引入了watch-tree-maintained这个包来watch file(我猜的),不过这个包能解决我的一个需求么?(我先跑起来f5,然后传如了一个path参数,f5会监控这个path下面的文件, 这时候如果我新建一个文件,你这个包能watch到这个文件么?)

    然后我还有一个需求就是watch动态的文件,比如jsp,php,aspx,如果这些文件变了,也能让浏览器自动f5,目前我想的是 让使用者多传一个proxy参数,如果有这个参数那么就让f5当一个代理服务器

    ps:话说我最近也写了一个f5这样的东西,不过我遇到了上面的问题。目前对第一个需求我还没想出好的方案,昨天晚上实现了static server的部分..
    UncleBill
        8
    UncleBill  
    OP
       2013-04-24 11:07:15 +08:00 via Android
    到工作的目录下运行f5--可以考虑传路径参数给f5

    确实是用的那个watch包,对于新建的文件,目前好像不会watch,如果没有watch,那其实是个bug(也许应该在新新文件创建后重新watch,或者push到watch列表里)

    目前也没有对动态文件做支持。对于刷新页面的需求,动态文件没有静态的大

    欢迎pull request
    romoo
        9
    romoo  
       2013-04-24 11:14:05 +08:00
    getf5.com 也可以实现第三条,实时刷新。
    UncleBill
        10
    UncleBill  
    OP
       2013-04-24 11:30:11 +08:00 via Android
    @romoo我没试过通过局域网使用getf5.com,转到linux下后就没再用它了
    handaidai
        11
    handaidai  
       2013-04-24 11:31:04 +08:00
    我现在就卡在 我如何知道使用者新建了一个文件...只要能搞定这个..那watch就太简单了..

    在我了解的一些公司中,前端很多时候都是直接做动态文件的开发,因为它可以include,使用静态开发太少了,因为静态做完之后还得弄成动态的,一旦项目大的话,因为静态无法include,导致一个公共模块在各个静态文件中都有,重复的代码太多了

    抱歉,我不会用git。。
    UncleBill
        12
    UncleBill  
    OP
       2013-04-24 11:46:08 +08:00 via Android
    @handaidai 你可以读读那个那个包的文档,创建新文件后会触发fileCreate还会返回那个文件

    git,我用了后有相见恨晚的感觉。推荐赶紧学,你可以读读git pro
    chuquus
        13
    chuquus  
       2013-04-24 11:51:18 +08:00
    @UncleBill 不需要特地的浏览器支持,开终端不是问题,如果你用了我想你就不会在维护你这个项目了。
    handaidai
        14
    handaidai  
       2013-04-24 12:05:13 +08:00
    好的,谢谢。

    我知道git和github都是好东西。我也流口水。可惜我英文太差。我之所以说你用watch-tree-maintained来watch file是猜的。就是看不懂它的文档.....

    ps: 羡慕会用linux的人呀。。
    UncleBill
        15
    UncleBill  
    OP
       2013-04-24 12:36:09 +08:00
    @handaidai 我试了,创建文件后,新文件也会被watch的,修改后也会刷新,所以那个bug不存在。

    @chuquus livereload需要手动加一段它自己的代码,或者用它的浏览器插件,f5不是这样,它会在返回的页面里加,而不是你的代码里。

    livereload会重新载入css或图片而不刷新页面,f5也做到了。
    chuquus
        16
    chuquus  
       2013-04-24 12:51:36 +08:00
    @UncleBill 不需要加载,插件在connect输出的时候自动加上去,虽然你的f5设计上可能会简单一些,但是grunt可以提供其他的构建功能,如自动编译CoffeeScript less,然后合并压缩,根据发布环境处理不同的情况。上次也有兄弟做了类似的产品,我不是说你的产品不好,只是如果能在已有的基础上做更好的体验不是更好,比如grunt-gui,提供默认的项目配置,gui管理。
    UncleBill
        17
    UncleBill  
    OP
       2013-04-24 13:05:07 +08:00
    @chuquus 我还没试grunt,只看了它的安装说明,它能合并coffee和less这点很好。我会考虑让它能接受路径参数,还可以设置默认的目录;gui的支持我还不打算加。

    @romoo 我回到windows,通过局域网试了下getf5.com的f5,貌似不能那样用,原因我不知道。
    island205
        18
    island205  
       2013-04-24 19:09:04 +08:00
    你发pull request给我,如果合理的话,我会更新。
    UncleBill
        19
    UncleBill  
    OP
       2013-04-24 20:53:53 +08:00
    @island205 pull request我已经发出去了,只是现在有冲突,得手动merge。
    github在pull request的下面给出了合并的方法
    UncleBill
        20
    UncleBill  
    OP
       2013-04-24 21:26:16 +08:00
    @island205 我已经将我的合并到一个新的分支(merge-bill)里了。你到master,然后合并这个分支就行了。
    UncleBill
        21
    UncleBill  
    OP
       2013-04-24 21:50:38 +08:00
    刚刚改了个比较重要的bug,也merge到了@island205 的项目中,大家可以用npm install -g f5进行安装了。
    也请直接关注或fork他的项目。
    UncleBill
        22
    UncleBill  
    OP
       2013-04-24 22:07:49 +08:00
    试了下,还需要@island205 发布才能用npm install -g f5安装
    @island205
    island205
        23
    island205  
       2013-05-03 14:26:59 +08:00
    @UncleBill 已经publish 到了npm上
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2588 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:19 · PVG 19:19 · LAX 03:19 · JFK 06:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.