搜索
首页后端开发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
继续使用PHP:耐力的原因继续使用PHP:耐力的原因Apr 19, 2025 am 12:23 AM

PHP仍然流行的原因是其易用性、灵活性和强大的生态系统。1)易用性和简单语法使其成为初学者的首选。2)与web开发紧密结合,处理HTTP请求和数据库交互出色。3)庞大的生态系统提供了丰富的工具和库。4)活跃的社区和开源性质使其适应新需求和技术趋势。

PHP和Python:探索他们的相似性和差异PHP和Python:探索他们的相似性和差异Apr 19, 2025 am 12:21 AM

PHP和Python都是高层次的编程语言,广泛应用于Web开发、数据处理和自动化任务。1.PHP常用于构建动态网站和内容管理系统,而Python常用于构建Web框架和数据科学。2.PHP使用echo输出内容,Python使用print。3.两者都支持面向对象编程,但语法和关键字不同。4.PHP支持弱类型转换,Python则更严格。5.PHP性能优化包括使用OPcache和异步编程,Python则使用cProfile和异步编程。

PHP和Python:解释了不同的范例PHP和Python:解释了不同的范例Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

PHP和Python:深入了解他们的历史PHP和Python:深入了解他们的历史Apr 18, 2025 am 12:25 AM

PHP起源于1994年,由RasmusLerdorf开发,最初用于跟踪网站访问者,逐渐演变为服务器端脚本语言,广泛应用于网页开发。Python由GuidovanRossum于1980年代末开发,1991年首次发布,强调代码可读性和简洁性,适用于科学计算、数据分析等领域。

在PHP和Python之间进行选择:指南在PHP和Python之间进行选择:指南Apr 18, 2025 am 12:24 AM

PHP适合网页开发和快速原型开发,Python适用于数据科学和机器学习。1.PHP用于动态网页开发,语法简单,适合快速开发。2.Python语法简洁,适用于多领域,库生态系统强大。

PHP和框架:现代化语言PHP和框架:现代化语言Apr 18, 2025 am 12:14 AM

PHP在现代化进程中仍然重要,因为它支持大量网站和应用,并通过框架适应开发需求。1.PHP7提升了性能并引入了新功能。2.现代框架如Laravel、Symfony和CodeIgniter简化开发,提高代码质量。3.性能优化和最佳实践进一步提升应用效率。

PHP的影响:网络开发及以后PHP的影响:网络开发及以后Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?PHP类型提示如何起作用,包括标量类型,返回类型,联合类型和无效类型?Apr 17, 2025 am 12:25 AM

PHP类型提示提升代码质量和可读性。1)标量类型提示:自PHP7.0起,允许在函数参数中指定基本数据类型,如int、float等。2)返回类型提示:确保函数返回值类型的一致性。3)联合类型提示:自PHP8.0起,允许在函数参数或返回值中指定多个类型。4)可空类型提示:允许包含null值,处理可能返回空值的函数。

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无尽的。

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

PhpStorm Mac 版本

PhpStorm Mac 版本

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

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

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用