配置文件下载

 http://vdisk.weibo.com/s/DOlfks4wpIj

LiveReload安装前的准备工作:

安装Node.js和Grunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行。

接下来,开始配置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),

// 启用目录浏览(相当于IIS中的目录浏览)

connect.directory(options.base)

];

};

// 项目配置(任务配置)

grunt.initConfig({

// 读取我们的项目配置并存储到pkg属性中

pkg: grunt.file.readJSON('package.json'),

// 通过connect任务,创建一个静态服务器

connect: {

options: {

// 服务器端口号

port: 8000,

// 服务器地址(可以使用主机名localhost,也能使用IP)

hostname: 'localhost',

// 物理路径(默认为. 即根目录)

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服务器地址。

7. 开始体验吧。

相关插件文档(GitHub):
grunt-contrib-watch
grunt-contrib-connect
connect-livereload

[转载]Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑的更多相关文章

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

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  2. Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑

    苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5.很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点. LiveReload会监控 ...

  3. PHP 页面自动刷新可借助JS来实现,简单示例如下:

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  4. 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

    2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...

  5. 方法总结:如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  6. HTML 页面自动刷新

    学习就是一个不断积累的过程,每一天能够学到一点新东西说明自己就在进步!! HTML head 里面设置页面自动刷新功能 <meta http-equiv="Refresh" ...

  7. 实现html页面自动刷新的几种方式

    自动页面刷新通常会用在对数据的实时性比较敏感的网站中,比如股票走势等,另外在普通的页面自动跳转中也会使用到页面自动刷新技术. 页面刷新我见过的有三种方式,下面来一一说明 1.通过在<head&g ...

  8. 如何设置页面自动刷新第一篇?? servlet setHeader("refresh","2")

    import java.io.IOException; import java.util.Random; import javax.servlet.ServletException; import j ...

  9. JAVA-JSP内置对象之response对象实现页面自动刷新

    相关资料:<21天学通Java Web开发> response对象 实现页面自动刷新1.可以通过response对象的addIntHeader()方法添加一个标题为Refrsh的标头,并指 ...

随机推荐

  1. wait、notify、sleep、interrupt对比分析

    对比分析Java中的各个线程相关的wait().notify().sleep().interrupt()方法 方法简述 Thread类 sleep:暂停当前正在执行的线程:(类方法) yield:暂停 ...

  2. OPenCL

    OpenCLhttp://baike.baidu.com/link?url=7uHWCVUYB3Sau_xh3OOKP-A08_IvmT1SJixdAXKezCuCfkzeSQDiSmesGyVGk8 ...

  3. Scene

    Unity 中场景切换 http://www.cnphp6.com/archives/62868 场景管理插件Scene Manager http://blog.csdn.net/onerain88/ ...

  4. 项目里面的某个资源文件(比如plist、音频等)无法使用

    检查:Build Phases -> Copy Bundle Resources

  5. PHP正则表达式详解(一)

    前言: 半年前我对正则表达式产生了兴趣,在网上查找过不少资料,看过不少的教程,最后在使用一个正则表达式工具RegexBuddy时,发现他的教程写的非常好,可以说是我目前见过最好的正则表达式教程.于是一 ...

  6. Mac Pro 安装 Sublime Text 3,个性化设置,主题 和 插件 收藏

    1.到官网下载安装包 http://www.sublimetext.com/3 2.附注册码一枚 Sublime Text 3 3126 —– BEGIN LICENSE —– Alexey Plut ...

  7. stack.sh failing giving error "g-api did not start"

    same issue i faced , tried with ./unstack.sh and ./clean.sh also but couldn't fix the issue.Followin ...

  8. iOS 查询数组中的对象

    简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 定义(最常用到的方法): NSPredicate *ca = [NSPred ...

  9. .NET 泛型

    泛型      泛型将类型参数的概念引入 .NET Framework,类型参数使得设计如下类和方法成为可能:这些类和方法将一个或多个类型的指定推迟到客户端代码声明并实例化该类或方法的时候.例如,通过 ...

  10. 网络编程之socket

    网络编程之socket socket:在网络编程中的一个基本组件,也称套接字. 一个套接字就是socket模块中的socket类的一个实例. 套接字包括两个: 服务器套接字和客户机套接字 套接字的实例 ...