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

时间 2019-12-13

标签使用 grunt 实现 livereload 实时刷新栏目 Node.js 繁體版

原文原文链接

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

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

一、在项目路径下安装gruntgithub

sudo npm install grunt --save-dev

二、生成package.jsonnpm

npm init

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

三、安装grunt-contrib-watch插件浏览器

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

四、新建Gruntfile.jsgrunt

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“

五、在html里添加spa

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

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

六、执行 grunt

很是简单使用的功能，enjoy it!code

参考资料：

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