详解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安装为Apache DSO
Oct 09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
Apr 12 PHP
修改Zend引擎实现PHP源码加密的原理及实践
Apr 14 PHP
php 图像函数大举例(非原创)
Jun 20 PHP
在命令行下运行PHP脚本[带参数]的方法
Jan 22 PHP
php自动加载autoload机制示例分享
Feb 20 PHP
JavaScript创建命名空间的5种写法
Jun 24 PHP
Laravel框架数据库CURD操作、连贯操作总结
Sep 03 PHP
PhpStorm terminal无法输入命令的解决方法
Oct 09 PHP
laravel创建类似ThinPHP中functions.php的全局函数
Nov 26 PHP
PHP判断密码强度的方法详解
May 26 PHP
php实现通过stomp协议连接ActiveMQ操作示例
Feb 23 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超级全局变量
2010/01/26 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
PDO实现学生管理系统
2020/03/21 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python实现朴素贝叶斯分类器
2018/03/28 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python实现石头剪刀布游戏
2021/01/20 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
介绍一下grep命令的使用
2012/06/28 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
小学清明节活动方案
2014/03/08 职场文书
供应链金融服务方案
2014/05/25 职场文书
试用期辞职信范文
2015/03/02 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python​格式化字符串
2022/04/20 Python