如何自动实时加载页面？

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

准备node环境

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

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

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

   前往 node中文站 下载最新的LTS版本安装即可

1. 验证node环境是否已经成功安装

$ node -v
v8.9.2$ npm -v
5.5.1

安装npm模块lr-http-server

npm是node package manager&＃xff08;node包管理器&＃xff09;的缩写&＃xff0c;使用它可以方便的安装我们在开发过程中使用到的node模块。而lr-http-server这个node模块可以作为静态资源的服务器&＃xff0c;并且实时资源的变更并重新加载展示页面。

1. 安装lr-http-server模块

$ 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
&＃43; lr-http-server&＃64;0.1.5
updated 1 package in 2.796s

1. 进入项目工程&＃xff0c;并启动静态资源服务器

$ 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

启动成功后&＃xff0c;浏览器会自动打开链接 http://127.0.0.1:8080/&＃xff0c;当然也可以用其他浏览器打开该地址。

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