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

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

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中的代码,保存之后,对应你的浏览器就自动刷新拉!

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

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

评论
发表评论
3年前
赞了此文章!
3年前

@天猪TZ

Once you’ve started a live reload server you’ll be able to access the live reload script. To enable live reload on your page, add a script tag before your closing tag pointing to the livereload.js script:

Feel free to add this script to your template situation and toggle with some sort of dev flag.

我不太想在页面中插入这个脚本呢。。不过可以通过动态参数配置的方法加入,个人所好吧。移动端的话 这样确实方便。

不需要connect-livereload,直接一个grunt watch就可以了。这里只是另外一种思路。

3年前

直接grunt, 用watch+connect-livereload就ok了。 watch内建对livereload的支持。 chrome插件这种,开发移动端应用就不管用了。

WRITTEN BY
PUBLISHED IN
nodejs 边角料

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

我的收藏