livereload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本，比如基于ruby的版本，我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务，并且检测文件变化，浏览器打开一个页面时候，引入固定的livereload.js（chrome插件会帮忙加上）会建立ws请求，当node检测到文件变化，则自动推送消息给浏览器，实现刷新。

livereload环境搭建

• nodejs安装
• grunt安装
• grunt-contrib-watch：npm install grunt-contrib-watch —save-dev
• grunt-livereload：npm install grunt-livereload —save-dev
• chrome插件：安装

编写grunt的Gruntfile.js文件

进入项目根目录，安装grunt基本服务（参考grunt使用介绍），然后修改Gruntfile.js内容，添加如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

livereload: {
    options: {
        base: 'public',
    },
    files: ['src/**/*']
}
watch: {
    all:{
        files: ['src/js/touch.js', 'src/sass/*.scss'],
        tasks: ['jshint', 'compass:dev'],
    },
    //grunt watch:js|css
    js:{
        files: ['src/js/touch.js'],
        tasks: ['jshint'],
    },
    css:{
        files: ['src/sass/*.scss'],
        tasks: ['compass:dev'],
    }
}
grunt.loadNpmTasks('grunt-livereload');
grunt.registerTask('live', ['livereload', 'watch:css']);

1

$ grunt live

浏览器端使用chrome插件打开要自动刷新的页面，例如：http://127.0.0.1/test.html，

点击chrome插件livereload的icon，仔细观察会发现icon的中间空心圆点变成了实心的。 这样就可以自动刷新了。

使用livereload

完成上面的步骤，这时候我们修改src/*/下的文件就会自动刷新页面，我修改了test.scss文件，

首先触发的是watch:css任务，执行compass:dev任务，即编译css文件为test.css，

这时触发livereload，实现自动刷新