书写HTML页面的过程中，能够一边输入一边在页面中自动加载输入的内容，是一种很好的体验。下面我们用一种很简单的方式来实现。
准备node环境
- 可以使用mac环境brew包管理器
在命令行中执行如下命令即可
# 安装node环境
$ brew install node
# 如果提示没有brew命令，需要先安装brew包管理器
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
-
也可以直接下载node安装包进行安装
前往 <a href="https://nodejs.org/zh-cn/" target="_blank">node中文站</a> 下载最新的LTS版本安装即可
image
- 验证node环境是否已经成功安装
$ node -v
v8.9.2
$ npm -v
5.5.1
安装npm模块lr-http-server
npm是node package manager（node包管理器）的缩写，使用它可以方便的安装我们在开发过程中使用到的node模块。而lr-http-server这个node模块可以作为静态资源的服务器，并且实时资源的变更并重新加载展示页面。
- 安装lr-http-server模块
$ sudo npm install -g lr-http-server
/Users/mytream/.nvm/versions/node/v8.9.2/bin/lrhs -> /Users/mytream/.nvm/versions/node/v8.9.2/lib/node_modules/lr-http-server/bin/lr-http-server
/Users/mytream/.nvm/versions/node/v8.9.2/bin/lr-http-server -> /Users/mytream/.nvm/versions/node/v8.9.2/lib/node_modules/lr-http-server/bin/lr-http-server
+ lr-http-server@0.1.5
updated 1 package in 2.796s
- 进入项目工程，并启动静态资源服务器
$ cd WebstormProjects/01-tezign-class
$ lr-http-server
HTTP server listening on port 8080
Serving /Users/mytream/WebstormProjects/01-tezign-class
Livereload listening on port 35729
Watching files:
/Users/mytream/WebstormProjects/01-tezign-class/**/*.html
/Users/mytream/WebstormProjects/01-tezign-class/**/*.js
/Users/mytream/WebstormProjects/01-tezign-class/**/*.css
/Users/mytream/WebstormProjects/01-tezign-class/**/*.xml
启动成功后，浏览器会自动打开链接 http://127.0.0.1:8080/，当然也可以用其他浏览器打开该地址。
接下来，我们就可以用喜爱的编辑器编辑工程下的资源文件，这些改动都会实时的体现在浏览器上了！
