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

最新推荐文章于 2022-01-19 15:55:58 发布

weixin_34220179

最新推荐文章于 2022-01-19 15:55:58 发布

阅读量199

点赞数

文章标签：前端 ViewUI

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']); };