详解Grunt插件之LiveReload实现页面自动刷新(两种方案)


Posted in PHP onJuly 31, 2015

方案一:grunt-livereload + Chrome Plug-in

优点:安装、配置简单方便。
缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的)。

1. 需要安装2个插接件:grunt-contrib-watch、connect-livereload

执行命令:

npm install --save-dev grunt-contrib-watch connect-livereload

2. 安装浏览器插件:Chrome LiveReload

3. 配置一个Web服务器(IIS/Apache),LiveReload需要在本地服务器环境下运行(对file:///文件路径支持并不是很好)。

4. 修改Gruntfile.js文件:

module.exports = function(grunt) {
 // 项目配置(任务配置)
 grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  watch: {
   client: {
    files: ['*.html', 'css/*', 'js/*', 'images/**/*'],
    options: {
     livereload: true
    }
   }
  }
 });
 // 加载插件
 grunt.loadNpmTasks('grunt-contrib-watch');
 // 自定义任务
 grunt.registerTask('live', ['watch']);
};

5. 执行:grunt live

看到如下提示,说明已经开始监听任务:

Running "watch" task

Waiting...

6. 打开我们的页面,例如:http://localhost/

7. 再点击Chrome LiveReload插件的ICON,此时ICON圆圈中心的小圆点变成实心的,说明插件执行成功。此时你改下网站文件看看,是不是实时更新了?

方案二:grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

优点:自动搭建静态文件服务器,不需在自己电脑上搭建Web服务器。

 不需要浏览器插件的支持(不现定于某个浏览器)。

不需要给网页手动添加livereload.js。
缺点:对于刚接触的人,配置略显复杂。

1. 安装我们所需要的3个插件:grunt-contrib-watch、grunt-contrib-connect、connect-livereload

执行命令:

npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

2. 修改Gruntfile.js文件:

module.exports = function(grunt) {
 // LiveReload的默认端口号,你也可以改成你想要的端口号
 var lrPort = 35729;
 // 使用connect-livereload模块,生成一个与LiveReload脚本
 // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
 var lrSnippet = require('connect-livereload')({ port: lrPort });
 // 使用 middleware(中间件),就必须关闭 LiveReload 的浏览器插件
 var lrMiddleware = function(connect, options) {
  return [
   // 把脚本,注入到静态文件中
   lrSnippet,
   // 静态文件服务器的路径
   connect.static(options.base[0]),
   // 启用目录浏览(相当于IIS中的目录浏览)
   connect.directory(options.base[0])
  ];
 };
 // 项目配置(任务配置)
 grunt.initConfig({
  // 读取我们的项目配置并存储到pkg属性中
  pkg: grunt.file.readJSON('package.json'),
  // 通过connect任务,创建一个静态服务器
  connect: {
   options: {
    // 服务器端口号
    port: 8000,
    // 服务器地址(可以使用主机名localhost,也能使用IP)
    hostname: 'localhost',
    // 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:/grunt/reloard。
    base: '.'
   },
   livereload: {
    options: {
     // 通过LiveReload脚本,让页面重新加载。
     middleware: lrMiddleware
    }
   }
  },
  // 通过watch任务,来监听文件是否有更改
  watch: {
   client: {
    // 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。
    options: {
     livereload: lrPort
    },
    // '**' 表示包含所有的子目录
    // '*' 表示包含所有的文件
    files: ['*.html', 'css/*', 'js/*', 'images/**/*']
   }
  }
 }); // grunt.initConfig配置完毕
 // 加载插件
 grunt.loadNpmTasks('grunt-contrib-connect');
 grunt.loadNpmTasks('grunt-contrib-watch');
 // 自定义任务
 grunt.registerTask('live', ['connect', 'watch']);
};

5. 执行:grunt live

看到如下提示,说明Web服务器搭建完成,并且开始监听任务:

Running "connect:livereload" (connect) task

Started connect web server on 127.0.0.1:8000.
Running "watch" task

Waiting...

注:执行该命令前,如果你有安装过LiveReload的浏览器插件,必须关闭。

6. 打开我们的页面,例如:http://localhost:8000/http://127.0.0.1:8000/
注:这里所打开的本地服务器地址,是我们刚才通过connect所搭建的静态文件服务器地址,而不是之前你用IIS或Apache自己搭建Web服务器地址。

以上就是本文详解Grunt插件之LiveReload实现页面自动刷新(两种方案),希望大家喜欢。

PHP 相关文章推荐
PHP5中的时间相差8小时的解决办法
Mar 28 PHP
php生成局部唯一识别码LUID的代码
Oct 06 PHP
用PHP和Shell写Hadoop的MapReduce程序
Apr 15 PHP
php+mysqli使用预处理技术进行数据库查询的方法
Jan 28 PHP
php强制更新图片缓存的方法
Feb 11 PHP
PHP使用array_merge重新排列数组下标的方法
Jul 22 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
Dec 21 PHP
PHP验证码生成原理和实现
Jan 24 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
May 12 PHP
PHP框架Laravel插件Pagination实现自定义分页
Apr 22 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
Jan 19 PHP
PHP根据key删除数组中指定的元素
Feb 28 PHP
PHP中filter函数校验数据的方法详解
Jul 31 #PHP
PHP代码实现爬虫记录――超管用
Jul 31 #PHP
PHP 前加at符合@的作用解析
Jul 31 #PHP
PHP查看当前变量类型的方法
Jul 31 #PHP
如何把php5.3版本升级到php5.4或者php5.5
Jul 31 #PHP
PHP内核探索:哈希表碰撞攻击原理
Jul 31 #PHP
如何使用纯PHP实现定时器任务(Timer)
Jul 31 #PHP
You might like
php学习之简单计算器实现代码
2011/06/09 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
详解Python绘图Turtle库
2019/10/12 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python使用re模块验证危险字符
2020/05/21 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
给同学的道歉信
2014/01/16 职场文书
校长先进事迹材料
2014/02/01 职场文书
采购求职信
2014/03/17 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
优秀教师个人总结
2015/02/11 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
MySQL深分页问题解决思路
2022/12/24 MySQL