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