详解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 函数执行效率的小比较
Oct 17 PHP
discuz程序的PHP加密函数原理分析
Aug 05 PHP
PHP解析目录路径的3个函数总结
Nov 18 PHP
PHP把MSSQL数据导入到MYSQL的方法
Dec 27 PHP
php中Socket创建与监听实现方法
Jan 05 PHP
PHP 反射(Reflection)使用实例
May 12 PHP
php编程每天必学之验证码
Mar 03 PHP
php并发加锁示例
Oct 17 PHP
PHP中单例模式与工厂模式详解
Feb 17 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
Oct 11 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
May 11 PHP
php 多继承的几种常见实现方法示例
Nov 18 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中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
js中开关变量使用实例
2017/02/24 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
layui的select联动实现代码
2019/09/28 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
matplotlib实现区域颜色填充
2019/03/18 Python
详解Python中的测试工具
2019/06/09 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Django 重写用户模型的实现
2019/07/29 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
学徒工职责
2014/03/06 职场文书
项目经理聘任书
2014/03/29 职场文书
记账会计岗位职责
2014/06/16 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python