码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-17 14:56:02      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   strong   

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

使用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

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

标签:style   blog   http   color   io   os   使用   ar   strong   

原文地址:http://www.cnblogs.com/kuler/p/3976956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!