详解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 相关文章推荐
如何对PHP程序中的常见漏洞进行攻击
Oct 09 PHP
PHP 多维数组排序(usort,uasort)
Jun 30 PHP
比较详细PHP生成静态页面教程
Jan 10 PHP
微博短链接算法php版本实现代码
Sep 15 PHP
PHP自定义大小验证码的方法详解
Jun 07 PHP
一个PHP的远程图片抓取函数分享
Sep 25 PHP
php利用腾讯ip分享计划获取地理位置示例分享
Jan 20 PHP
PHP实现HTTP断点续传的方法
Jun 17 PHP
在Mac上编译安装PHP7的开发环境
Jul 28 PHP
php实现简单爬虫的开发
Mar 28 PHP
yii2超好用的日期组件和时间组件
May 05 PHP
php 删除指定文件夹的实例讲解
Jul 25 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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python实现矩阵打印
2019/03/02 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
创业培训计划书
2014/05/03 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2014年教师工作总结
2014/11/10 职场文书
文明单位申报材料
2014/12/23 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
初中历史教学反思
2016/02/19 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python