前端实时可视化工具livereload安装和使用

什么是前端实时可视化工具
前端开发人员都知道，每修改一点代码，都要刷新浏览器才能看到页面修改后的效果，效率很低。
前端实时可视化工具，通过websocket往代码中注入一段js，监视代码是否有修正，实时刷新画面。

都有哪些，对比
前端实时可视化工具：livestyle，livereload，browser-sync
css,images,less等的修改都能实时展示在页面中，除此外livestyle还支持firebug修改代码实时保存到代码中。

chrome，node livereload原理
使用node开启一个websocket服务，并且检测文件的变化，浏览器打开页面的时候，引入一个固定的livereload.js（插件安装后，插件自动加上）建立ws连接，当node检测到文件变化时，通知浏览器实时刷新。

livereload安装和使用
这次介绍livereload的安装和使用。
需要安装chrome插件 livereload， nodejs插件livereload。

1. chrome插件安装
   chrome应用商店在国内打不开，可以采取迂回手法事先下载插件，然后拖入chrome安装。
   下载插件：LiveReload.crx
   安装完后，在浏览器地址栏后面出现一个livereload图标。

2. nodejs安装和使用livereload插件的命令如下

C:\Users\apple>node -v
v10.15.0

C:\Users\apple>npm install livereload -g
C:\Users\apple\AppData\Roaming\npm\livereload -> C:\Users\apple\AppData\Roaming\npm\node_modules\livereload\bin\livereload.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\livereload\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ livereload@0.8.0
added 137 packages from 108 contributors in 12.861s


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.4.1 -> 6.10.3       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.10.3   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯


C:\Users\apple>livereload -v
0.8.0

//进入项目目录
C:\Users\apple>cd C:\0_cute_wife\webpack

//启动livereload，这时可以看到浏览器的livereload图标变成实心，此时修改html文件，按ctrl+s保存时，修改展示在页面中。
C:\0_cute_wife\webpack>livereload
Starting LiveReload v0.8.0 for C:\0_cute_wife\webpack on port 35729.