使用nodejs实现实时刷新浏览器
发布在nodejs 边角料2014年4月24日view:13053
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

简单来说,实时刷新分几种模式来实现:

1,放一个js在页面里,心跳本地一个端口,告诉你监控的文件是否变化,变化了reload页面。(常用的,但是好麻烦还要放个js在页面里,上线还要去掉)

2,放一个js在页面里,心跳当前页面的link style script变化,diff一下,是否reload。

3,直接操纵浏览器原生api,根据文件变化,进行实时刷新。

方法很多,我选择第3个。。

还有很多工具,实时刷新功能是收费的,让我先来鄙视一下他们……

下面说下我的解决办法:

头几天找到一个好玩的。

https://github.com/smblott-github/chromix

相应得实现了一个chrome 插件 叫

https://github.com/smblott-github/chromi

chromix 是一个npm的包,安装后会有一个chrmi的client和一个server。

chromi的client负责发命令,server负责给chrome插件指令,然后操作chrome的action。

刷新,新开页面,都不是问题拉!

那么监控我用的grunt watch来实现的。下面上代码吧:

npm install chromix -g

chromix-server > /dev/null & //后台运行

Gruntfile中得watch部分这么写:

watch: {
        scripts: {
            files: ['conf/*.js','commons/*.js','mods/*.js'],
            options:{
                spawn:false
            }
        }
    }

grunt.event.on('watch', function(action, filepath, target) {
    exec('chromix reload');     
});

监控本地的几个目录,再定义个事件,调用命令行的chrmix 客户端reload命令。(reload为刷新当前窗口)

最后我们watch这个项目:

grunt watch > /dev/null & //后台运行

然后我们修改一下conf中的代码,保存之后,对应你的浏览器就自动刷新拉!

就是这么屌。如果你的编辑器是透明的话或者双显示器的同学,有福利了……。

最主要,这些都是免费的……

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
nodejs 边角料

分享和记录一下,个人在学习nodejs中遇到的一些有意思的事。

友情链接 大搜车前端团队博客
我的收藏