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

方案一: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实现页面自动刷新(两种方案),希望大家喜欢。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索grunt插件开发
grunt_livereload
grunt livereload、gulp livereload详解、gruntfile.js 详解、grunt 跨域 实例、grunt实例,以便于您获取更多的相关知识。

时间: 2024-10-24 13:31:51

详解Grunt插件之LiveReload实现页面自动刷新(两种方案)_php实例的相关文章

php生成静态html页面的方法(2种方法)_php实例

因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求,对于一个访问量可能达百万千万级别的网站来说 这无疑是服务器一个大大的负担,所以把动态数据转换成静态html页面就成了节省人力物力的首选. 因为此前没有相应的经验 刚开始的时候觉得这个技术很神秘,但在看了一些例子以后发现并不是那么复杂(不过网上的资料并不是特别详细),经过一个上午加中下午的试验 终于把该做的任务完成了 下面是一些心得和一个简单的例子 希望大虾们不要笑话我哈 一般来说 用php转换输出html页面有两种办法 引用大虾的文章

让PHP支持页面回退的两种方法_php技巧

在开发过程中,往往因为表单出错而返回页面的时候填写的信息都不见了,为了支持页面回跳,可以通过两种方法实现. 第一,使用Header方法设置消息头Cache-control header('Cache-control: private, must-revalidate');  //支持页面回跳   第二,使用session_cache_limiter方法 //注意要写在session_start方法之前  session_cache_limiter('private, must-revalidat

360浏览器如何不安装插件就能设置页面自动刷新时间

  1.打开360浏览,在右上角点击"工具"就能看到"自动刷新"选项了. 2.将鼠标移动到"自动刷新"选项上面,能看下图所示.我们下面的"设置自动刷新频率"设置好以后.然后选择是整个浏览器自动刷新还是当前标签页自动刷新.

用PHP程序实现支持页面后退的两种方法_php技巧

  第一,使用Header方法设置消息头Cache-control QUOTE: header('Cache-control: private, must-revalidate');  //支持页面回跳 第二,使用session_cache_limiter方法 QUOTE:   //注意要写在session_start方法之前     session_cache_limiter('private, must-revalidate'); 补充: Cache-Control消息头域说明 Cache-

Android 中倒计时验证两种常用方式实例详解

Android 中倒计时验证两种常用方式实例详解 短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用.看图: 说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 1.第一种方式:Timer /** * Description:自定义Timer * <p> * Created by Mjj on 2016/12/4. */ public class TimeCount extends CountDownTimer { private Button button; //参数依

如何让火狐浏览器页面自动刷新方法介绍

  火狐浏览器是一款非常好用的主页浏览工具,小编目前也是使用的此浏览器,但是有些用户最近向我们求助,如何让火狐浏览器打开的页面自动刷新,那么小编在整理了一些信息后,发现火狐有这么个插件,下面看小编为大家介绍. 1.右击页面看看有没有下图这个组件,如果有那么直接点击这个工具的下拉 2.设置点击自定义你想要的时间. 3.如果大家的火狐浏览器没有这个组件,那么我们可以点击"菜单"=="添加组件" 4.在搜所栏输入reloadevery,然后找到这个组件点击"安装

一个页面上连接两种不同数据库 是否可行

一个页面上连接两种不同数据库,进行操作...不知道,是否可行? 有这可能吗? 当然可以 mssql ConnStr = "driver={SQL Server};server=192.168.1.110;database=news;uid=sa;pwd=123456" Set conn = Server.CreateObject("ADODB.Connection") conn.Open ConnStr mysql set myconn = server.creat

页面自动刷新

刷新|页面     当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果非常地简单,而且这个效果甚至不能称之为特效.你只要把如下代码加入你的网页中就可以了. 1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面. 2,页面自动跳转:把如下代码加入<head&g

用PHP程序实现支持页面后退的两种方法

用PHP程序实现支持页面后退的两种方法 在开发过程中,往往因为表单出错而返回页面的时候填写的信息都不见了,为了支持页面回跳,可以通过两种方法实现. 第一,使用Header方法设置消息头Cache-control header('Cache-control: private, must-revalidate');  //支持页面回跳 第二,使用session_cache_limiter方法 //注意要写在session_start方法之前session_cache_limiter('private