详解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 相关文章推荐
第十二节--类的自动加载
Nov 16 PHP
基于asp+ajax和数据库驱动的二级联动菜单
May 06 PHP
分享一下贝贝成长进度的php代码
Sep 14 PHP
浅谈PHP与C#的值类型指向区别的详解
May 21 PHP
PHP的curl实现get,post和cookie(实例介绍)
Jun 17 PHP
启用Csrf后POST数据时出现的400错误
Jul 05 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
Jan 04 PHP
thinkphp3.x中cookie方法的用法分析
May 19 PHP
Yii2简单实现给表单添加验证码的方法
Jul 18 PHP
php生成毫秒时间戳的实例讲解
Sep 22 PHP
PHP数组Key强制类型转换实现原理解析
Sep 01 PHP
php中使用array_filter()函数过滤数组实例讲解
Mar 03 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php身份证号码检查类实例
2015/06/18 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
javascript 三种编解码方式
2010/02/01 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JS delegate与live浅析
2013/12/21 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
浅析javascript 定时器
2014/12/23 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
生产管理的三大手法
2013/11/11 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
python开发制作好看的时钟效果
2022/05/02 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android