详解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(视频)Http下载
Dec 12 PHP
谈谈新手如何学习PHP
Dec 14 PHP
mysql 中InnoDB和MyISAM的区别分析小结
Apr 15 PHP
备份mysql数据库的php代码(一个表一个文件)
May 28 PHP
php 文章调用类代码
Aug 11 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
Jun 17 PHP
header跳转和include包含问题详解
Sep 08 PHP
PHP中fwrite与file_put_contents性能测试代码
Aug 02 PHP
PHPer 需要了解的 5 个 Composer 小技巧
Aug 18 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
Sep 12 PHP
php静态文件生成类实例分析
Jan 03 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
Mar 07 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
PHP 引用文件技巧
2010/03/02 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
javascript编程起步(第四课)
2007/01/10 Javascript
ie 调试javascript的工具
2009/04/29 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
angular十大常见问题
2017/03/07 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
python生成器表达式和列表解析
2016/03/10 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
pandas实现选取特定索引的行
2018/04/20 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
django 类视图的使用方法详解
2019/07/24 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
Java语言的优势
2015/01/10 面试题
商场中秋节广播稿
2014/01/17 职场文书
cf收人广告词
2014/03/14 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
市级三好学生评语
2014/12/29 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
Redis如何一键部署脚本
2021/04/12 Redis