当前位置：首页 > 资讯 > 技术文档

详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

时间：2022-03-21 16:49 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

方案一：grunt-livereload + Chrome Plug-in 优点：安装、配置简单方便。缺点：需要配合指定的浏览器插件（Firefox也有相关插件，IE么你懂的）。 [b]1. 需要安装2个插接件：grunt-contrib-watch、connect-livereload[/b] 执行命令：

[url=file:///][b]file:///[/b][/url][b]文件路径支持并不是很好）。[/b] [b]4. 修改Gruntfile.js文件：[/b]

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']);
};

[b]5. 执行：grunt live[/b] 看到如下提示，说明已经开始监听任务：

[url=http://localhost/][b]http://localhost/[/b][/url] [b]7. 再点击Chrome LiveReload插件的ICON，此时ICON圆圈中心的小圆点变成实心的，说明插件执行成功。[/b]此时你改下网站文件看看，是不是实时更新了？方案二：grunt-contrib-watch + grunt-contrib-connect + grunt-livereload 优点：自动搭建静态文件服务器，不需在自己电脑上搭建Web服务器。　　　不需要浏览器插件的支持（不现定于某个浏览器）。　　　　不需要给网页手动添加livereload.js。缺点：对于刚接触的人，配置略显复杂。 [b]1. 安装我们所需要的3个插件：grunt-contrib-watch、grunt-contrib-connect、connect-livereload[/b] 执行命令：

[url=http://localhost:8000/][b]http://localhost:8000/[/b][/url][b] 或 [/b][url=http://127.0.0.1:8000/][b]http://127.0.0.1:8000/[/b][/url] 注：这里所打开的本地服务器地址，是我们刚才通过connect所搭建的静态文件服务器地址，而不是之前你用IIS或Apache自己搭建Web服务器地址。以上就是本文详解Grunt插件之LiveReload实现页面自动刷新（两种方案），希望大家喜欢。

全部评论(0)

上一篇：Node.js的项目构建工具Grunt的安装与配置教程
下一篇：Grunt入门教程(自动任务运行器)

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部