详解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 相关文章推荐
PHP 飞信好友免费短信API接口开源版
Jul 22 PHP
详解php的魔术方法__get()和__set()使用介绍
Sep 19 PHP
php禁止浏览器使用缓存页面的方法
Nov 07 PHP
php中smarty变量修饰用法实例分析
Jun 11 PHP
PHP MPDF中文乱码的解决方式
Dec 08 PHP
Joomla使用Apache重写模式的方法
May 04 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
Jun 17 PHP
PHP 类与构造函数解析
Feb 06 PHP
php file_get_contents取文件中数组元素的方法
Apr 01 PHP
使用PHP json_decode可能遇到的坑与解决方法
Aug 03 PHP
Laravel中日期时间处理包Carbon的简单使用
Sep 21 PHP
php写app用的框架整理
Sep 29 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
获得Google PR值的PHP代码
2007/01/28 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
初识Node.js
2014/09/03 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
django 自定义过滤器的实现
2019/02/26 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
什么是TCP/IP
2014/07/27 面试题
语文教学感言
2014/02/06 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
Python爬取某拍短视频
2021/06/11 Python