搜索
首页后端开发php教程详解Grunt插件之LiveReload实现页面自动刷新(两种方案),gruntlivereload_PHP教程

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

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

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1041331.htmlTechArticle详解Grunt插件之LiveReload实现页面自动刷新(两种方案),gruntlivereload 方案一:grunt-livereload + Chrome Plug-in 优点:安装、配置简单方便。 缺点...
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
使用Python和WebDriver实现网页自动刷新使用Python和WebDriver实现网页自动刷新Jul 08, 2023 pm 01:46 PM

使用Python和WebDriver实现网页自动刷新引言:在日常的网页浏览中,我们常常会遇到需要频繁刷新网页的场景,比如监控实时数据、自动刷新动态页面等。手动刷新网页会浪费大量的时间和精力,因此我们可以使用Python和WebDriver来实现自动刷新网页的功能,提高我们的工作效率。一、安装和配置环境在开始之前,我们需要安装和配置相应的环境。安装Python

网页自动刷新设置方法网页自动刷新设置方法Oct 26, 2023 am 10:52 AM

设置网页的自动刷新可以使用HTML的“meta”标签、JavaScript的“setTimeout”函数、“setInterval”函数或HTTP的”Refresh“头。详细介绍:1、使用HTML的“meta”标签,在HTML文档的“<head>”标签中,可以使用“meta”标签来设置网页的自动刷新;2、JavaScript的“setTimeout”函数等等。

win11桌面经常自动刷新怎么办win11桌面经常自动刷新怎么办Jun 29, 2023 pm 02:56 PM

win11桌面经常自动刷新怎么办?win11系统是微软推出的最新Windows系统,拥有最新的技术构建,能够提供给你最新的优质服务,但同时,也存在着一些新型的问题。最近有小伙伴反应,win11在更新之后就经常出现桌面不断刷新的现象,这很有可能是因为系统出现了一些问题,那么,我们究竟该怎么解决这个问题呢?下面就由小编为大家带来win11桌面经常自动刷新解决方法。win11桌面经常自动刷新解决方法方法一:卸载更新1、首先我们使用键盘“ctrl+shift+esc”组合键打开任务管理器。2、打开后点击

Python实现无头浏览器采集应用的页面自动刷新与定时任务功能解析Python实现无头浏览器采集应用的页面自动刷新与定时任务功能解析Aug 08, 2023 am 08:13 AM

Python实现无头浏览器采集应用的页面自动刷新与定时任务功能解析随着网络的快速发展和应用的普及,网页数据的采集变得越来越重要。而无头浏览器则是采集网页数据的有效工具之一。本文将介绍如何使用Python实现无头浏览器的页面自动刷新和定时任务功能。无头浏览器采用的是无图形界面的浏览器操作模式,能够以自动化的方式模拟人类的操作行为,从而实现访问网页、点击按钮、填

如何解决Win11桌面自动刷新的问题如何解决Win11桌面自动刷新的问题Jan 09, 2024 am 09:57 AM

虽然Win11系统已经推出很长一段时间了,但我们在使用的过程中还是会遇到很多问题,例如有的小伙伴们在使用过程中经常会遇到屏幕桌面一直自动刷新的情况,这时候要如何解决呢?下面就和小编一起来看看解决方法吧。Win11桌面自动刷新的解决方法1、首先我们使用键盘“ctrl+shift+esc”组合键打开任务管理器。2、打开后点击左上角的“文件”,并选择其中的“运行新任务”。3、然后勾选“以系统管理权限创建此任务”选项,

如何解决Win10桌面自动刷新?如何解决Win10桌面自动刷新?Jun 30, 2023 pm 11:13 PM

Win10系统桌面经常自动刷新怎么解决?我们日常中都会使用电脑来学习娱乐,桌面上也放了很多我们需要的文件和应用,但是近期有小伙伴在使用win10的时候,桌面一直不断的自动刷新。如果你不会解决的话,小编下面整理了Win10系统桌面经常自动刷新解决指南,感兴趣的话,跟着小编一起往下看看吧!Win10系统桌面经常自动刷新解决指南1、鼠标右键点击“开始“菜单,选择“任务管理器”,如图所示。2、在”任务管理器“界面,在进程中找到”Windows资源管理器“,如图所示。3、鼠标右键点击它,在出现的界面中选择

Python脚本自动刷新Excel电子表格Python脚本自动刷新Excel电子表格Sep 09, 2023 pm 06:21 PM

Python和Excel是两个强大的工具,结合起来可以开启自动化世界。Python具有多功能的库和用户友好的语法,使我们能够编写脚本来有效地执行各种任务。另一方面,Excel是一种广泛使用的电子表格程序,它为数据分析和操作提供了熟悉的界面。在本教程中,我们将探索如何利用Python来自动化刷新Excel电子表格的过程,从而节省我们的时间和精力。您是否发现自己花费了宝贵的时间使用更新的数据手动刷新Excel电子表格?这是一项重复且耗时的任务,可能会真正降低生产力。在本文中,我们将指导您完成使用Py

火狐浏览器怎么设置自动刷新 设置自动刷新的操作步骤火狐浏览器怎么设置自动刷新 设置自动刷新的操作步骤Mar 12, 2024 pm 02:30 PM

  火狐浏览器app非常多手机用户都在用,搜索功能非常强大,只要是你想知道的想看的,都能第一时间找到结果和答案,所有浏览板块都是开放的,享受最舒适的上网浏览服务。自动屏蔽烦人的广告弹窗,首页搜索栏非常干净简洁,而且只需要输入关键词,就能找到相对应的结果,不同格式的文件文档都可以下载缓存,新闻资讯、视频内容都是免费翻阅观看的,还能设置自动刷新,解放双手上网速度更快,且没有任何卡顿,记录数据自动保存不会丢失,现在小编仔细一一为火狐浏览器用户们带来设置自动刷新的操作步骤。  1、首先打开火狐浏览器  

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。