使用grunt实现livereload(实时刷新)

在做网页的时候，经常刷新页面去查看修改的代码是否正常的显示出来。经常按【刷新键】好麻烦，如果改了代码后，浏览器上就能看到更新代码后的效果，那多好啊。

使用grunt（温习一下怎么使用grunt）

 

1、在项目路径下安装grunt

sudo npm install grunt --save-dev

 

2、生成package.json

npm init

实现livereload功能，需要使用grunt-contrib-watch插件

3、安装grunt-contrib-watch插件

sudo npm install grunt-contrib-watch --save-dev

 

4、新建Gruntfile.js

module.exports = function(grunt){
     grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),
          watch: {
               livereload: {
                    options: { livereload: 8900},
                    files: ['www/**']
               },
          }
     });

      // 加载包含 "uglify" 任务的插件。
     grunt.loadNpmTasks('grunt-contrib-watch');

     // 默认被执行的任务列表。
     grunt.registerTask('default', ['watch']);
}

*livereload可以设置为”true“或者一个端口号，例如”8900“

5、在html里添加

<script src="//localhost:8900/livereload.js"></script>

*这里的端口号根据上面livereload的设置，如果是”true“，端口号是35729。

6、执行 grunt

非常简单使用的功能，enjoy it!

 

参考资料：

https://github.com/gruntjs/grunt-contrib-watch