分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

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快速入门