http://www.tuicool.com/articles/2eaQJn
用Grunt配置watch和liveReload组件，可以实时检测指定的文件变化并自动刷新浏览器。目前基本已经成为了我的必备配置。特别是在写前端页面的时候，不用再频繁去点浏览器刷新按钮。工作的时候把浏览器拖到扩展屏，保存文件实时看到变化，特别提高开发效率。
而且livereload插件非常人性化，在检测到不需要重刷新浏览器运行的文件，例如css文件变化时，直接在页面里重载文件，而不刷新页面。使效果反应非常快捷。
下面是我的Grunt.js文件配置:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
html: {
files: ['skins/**.html'],
options: {livereload:true}
},
css: {
files: ['assets/**/*.css','skins/**/*.css'],
options: {livereload:true}
},
js: {
files: ['assets/**/*.js'],
options: {livereload:true}
},
less: {
files: ['assets/**/*.less'],
options: {livereload:false},
tasks: ['less:main']
}
},
less:{
main: { expand: true, cwd: 'assets/', src: ['**/*.less','!import.less'], dest: 'assets/', ext: '.css' }
}
});
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default',['watch']);
grunt.registerTask('lessc',['less:main']);
};
我习惯这样按照文件类型来分别配置。
在对相应的html、css、js文件发生变化时，直接调用liveReload刷新浏览器或重载文件。
在less文件发生变化时，先调用less组件的main任务，把less文件编译生成相应的css文件。css文件生成时因为文件变化会触发['watch:css']从而使liveReload重载css文件。
同样的，还可以再增加其他组件或是细分配置，例如加入uglify压缩js文件，或是contact合并等。配合使用极大的解放双手了。Grunt就是前端自动化利器！
对于liveReload，浏览器需要安装插件配合。 Chrome版本的 Firefox版本的
Grunt的配置和组件安装可以参考: Grunt快速入门
