如何自动实时加载页面？

书写HTML页面的过程中，能够一边输入一边在页面中自动加载输入的内容，是一种很好的体验。下面我们用一种很简单的方式来实现。

准备node环境

1. 可以使用mac环境brew包管理器
   在命令行中执行如下命令即可

    # 安装node环境 
    $ brew install node
    
   # 如果提示没有brew命令，需要先安装brew包管理器
   $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1. 也可以直接下载node安装包进行安装

   前往 <a href="https://nodejs.org/zh-cn/" target="_blank">node中文站</a> 下载最新的LTS版本安装即可

image

1. 验证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模块可以作为静态资源的服务器，并且实时资源的变更并重新加载展示页面。

1. 安装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

2. 进入项目工程，并启动静态资源服务器

$ 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/，当然也可以用其他浏览器打开该地址。

接下来，我们就可以用喜爱的编辑器编辑工程下的资源文件，这些改动都会实时的体现在浏览器上了！