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

方案一: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实现页面自动刷新(两种方案),希望大家喜欢。

时间: 2015-07-29

livereload工具实现前端可视化开发【推荐】

在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过不懈的努力,发现了这么一个工具--livereload.这是一款能根据你本地文件(html.css.js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量. 安装chrome插件 这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,

使用WEB工具快速提高Android开发效率

正所谓工欲善其事,必先利其器.学习并应用优秀的轮子,可以让我们跑的更快,走的更远.这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包括:开发工具,监测工具,第三方代码库等. 在Google的广大支持下,便捷开发Android程序的Native工具层出不穷.其实Android开发涉及到的范围也不小,一些Web工具有时候也会带来事半功倍的效果.有些甚至是一些native应用无法做到的.本文,将简单列举一下本人正在使用的一些工具,当然也会持续更新. 查找优秀的参考工程 co

Android音频可视化开发案例说明

Android 调用自带的录制音频程序 Android中有自带的音频录制程序,我们可以通过指定一个Action MediaStore.Audio.Media.RECORD_SOUND_ACTION的Intent来 启动它就可以了.然后在onActivityResult()方法中,获取Intent的Data,就是录制的音频对应的URI. java代码: 复制代码 代码如下: package eoe.demo; import android.app.Activity; import android.

[JAVA]十四种Java开发工具点评

在计算机开发语言的历史中,从来没有哪种语言象Java那样受到如此众多厂商的支持,有如此多的开发工具,Java菜鸟们如初入大观园的刘姥姥,看花了眼,不知该何种选择.的确,这些工具各有所长,都没有绝对完美的,就算是老鸟也很难做出选择.在本文中我简要介绍了常见的十四种Java开发工具的特点,管中窥"器",希望能对大家有所帮助. 1.JDK (Java Development Kit) 2.Java Workshop 3.NetBeans 与Sun Java Studio 5 4.Borlan

Docker搭建前端Java的开发环境详解

一.解决的痛点 1.免搭建后端开发环境. 2.开发环境改变只需要改变镜像就能同步更新. 3.不需要eclipse等IDE工具. 4.切换开发项目 二.解决思路 利用docker启动Ubuntu镜像,在容器中搭建好项目需要的开发环境,使用挂载卷将本地代码挂载到容器中,使用容器中的环境编译运行代码,宿主机通过 docker 暴漏出的端口访问容器中的服务,这样前端的开发机上就只需要部署docker就搞定了. 三.关于docker 了解docker 本文并不打算细讲docker的知识,相关的文章有很多,

PHP 开发工具

一 设计工具 UML 和相关设计工具  - Argo UML  UML绘图工具,支持PHP stub生成. (commercial spin off is Posideon) –Java编写.  - Umbrello UML  UML绘图工具,支持PHP stub生成. 需要Unix / KDE.  - Dia  支持UML 的绘图工具 -使用AutoDia 生成PHP.  - XMI 2 PHP  从XMI文档生成PHP代码,用XML描述UML的一种形式. 二 编码工具 推荐的 IDE / 编

初学java常用开发工具介绍

Java的应用越来越广泛,学习Java的人也越来越多.学过程序设计的人知道,使用Basic进行程序设计,可以使用QBasic.Visual Basic等开发工具:使用C语言进行程序设计,可以使用Turbo C.Visual C++.C++ Builder等开发工具.这些开发工具集成了编辑器和编译器,是集成开发工具,很方便使用.学习Java程序设计,同样需要方便易用的开发工具.Java的开发工具很多,而且各有优缺点,初学者往往不知道有哪些常用的开发工具,或者由于面临的选择比较多而产生困惑.本文对初

分享15款Java程序员必备的开发工具

如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同的观点:一种认为Java是最简单功能最强大的编程语言之一,另一种则表示这种编程语言既难用又复杂. 下面这些工具或许功能和作用不同,但是有着一个共同的主旨,那就是--它们都是为了给Java编码和开发提供卓越的支持. 1. JDK(Java开发工具包)如果你打算用Java开发一些小程序和应用程序,那么首先得给自己准备一个类似于JDK的工具

Bootstrap前端开发案例一

现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发.(后面会总结一些less的使用) 学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/ 下面是部分目标效果图: 下面我就总结一个小Demo中的技巧和原理: 第一步.http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解

前端构建 Less入门(CSS预处理器)

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码. 一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理