chrome+live.js实现LiveReload功能

LiveReload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率

live.js:http://livejs.com/

使用方法：

1.在HTML文件中包含该文件
<script type="text/javascript" src="http://livejs.com/live.js"></script>

2.将 html 放在本地的 apache 环境下，然后通过 http 访问该资源，试试使用sublime或者你常用的编辑器编辑文件并保存，等待1-3秒查看效果

那如果有很多文件都要这样做呢？总不可能一个个包含吧当然如果有头部模版可以直接写在模版文件中顺带包含~ 但是针对单个项目是这样如果本地有多个项目都想要实现这样的功能，那么就需要我们用到chrome扩展啦~

来来来说干就干

使用live.js制作一个LiveReload功能的chrome应用需要一个manifest.json文件

内容如下：

{
  “name”: “自动重载插件”,
  “manifest_version”: 2,
  “version”: “1.0”,
  “description”: “支持http方式访问的文件实时重载”,
  “content_scripts”: [{
      “matches”: [“http://*.dev/“],
      “js”: [“live.js”]
    }]
}

我这里呢就不解释太多里面的参数了，这边需要更改的参数就一个 ,就是应用匹配的网址（matches）

匹配规则戳这里（考虑到GFW 这里贴出360公司翻译的中文版开发指南）：http://open.chrome.360.cn/extension_dev/match_patterns.html

如果你的本地开发环境是apache的话访问首页应该是http://localhost/ 如果你想匹配这个域名下所有项目的话就填写：http://localhost/

如果你只想某个项目要livereload功能的话那同理：http://localhost/projects directory name/

我个人开发项目喜欢自定义本地域名

比如我的首页定义成：http://index.dev/(原：http://localhost/)

项目域名定义成：http://projects directory name.dev/（原：http://locahost/projects directory name）

所以我这边的匹配规则是http://*.dev

说了这么多我想各位脑子都不笨，何况还有文档还有下方的”js”:[“live.js”]大家记得去live.js的官网下载（上面有链接）并放到与mainfest.json同一目录下