详解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 相关文章推荐
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
Aug 19 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
Jun 30 PHP
在项目中寻找代码的坏命名
Jul 14 PHP
ThinkPHP的L方法使用简介
Jun 18 PHP
ThinkPHP模板引擎之导入资源文件方法详解
Jun 18 PHP
基于PHP的简单采集数据入库程序【续篇】
Jul 30 PHP
php 删除cookie方法详解
Dec 01 PHP
php简单定时执行任务的实现方法
Feb 23 PHP
php中执行系统命令的方法
Mar 21 PHP
php+ajax无刷新上传图片实例代码
Nov 17 PHP
浅谈PHP中的Trait使用方法
Mar 22 PHP
PHP7修改的函数
Mar 09 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JS性能优化笔记搜索整理
2013/08/21 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
委托书模板
2014/04/04 职场文书
小学校园之星事迹材料
2014/05/16 职场文书