本文介绍博主使用过的两种web小型开发服务器，可以用来热加载HTML / JavaScript / CSS文件。

browserSync

browsersync：浏览器同步测试工具，简单来说就是当你保存文件的同时浏览器会自动刷新网页。省去了手动刷新网页的环节，大大的节省了开发时间，这个工具是基于nodejs的，可以通过npm安装。

安装

在开始菜单找到node.js command prompt打开，输入安装命令：
npm install -g browser-sync

使用

通过命令行工具，进入到项目根目录下，输入如下命令：
1、如果是纯静态站点（也就是仅仅一些.html文件的情况）：

1
2
//表示监听整个项目
browser-sync strat --server --files "***.html, ***"

BrowserSync会自动提供一个新地址（如未被占用的话，默认http://localhost:3000）用于访问。

2、如果是动态站点（使用代理模式）：
例如PHP站点，已经建立了一个本地服务器如http://localhost:8080，此时输入如下命令：

1
browser-sync start --proxy "localhost:8080" --files "css/*.css"

其他

1、注意事项
项目根目录下必须要有一个index.html文件，不然会报错：Cannot GET /
另外也可以通过gulp使用这个工具，Gulp是现在流行的自动化工具。参考gulp新手入门教程

2、修改配置文件
在命令行工具中输入：browser-sync，你会看到起完整的控制台命令指南。其中有一个：browser-sync init。 运行它，将在当前目录生成一个配置文件bs-config.js。参考官方文档修改这个文件，然后运行：

start --config bs-config.js```就将以其完整配置信息运行BrowserSync。使用**ctrl+c**可以终止当前目录，清空用**cls**命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# live-server
live-server是一个具有实时重载功能的小型开发服务器。用它来热加载HTML / JavaScript / CSS文件，但不能用于部署最终的网站系统。
## 安装
1、前提条件需要node.js和npm的依赖（可以自己先搞定，不难）；

2、使用npm全局安装：```npm install -g live-server```

## 使用
在所在项目目录下，打开命令行工具，输入 **live-server**，回车就可以了（注意这里默认打开的是**index.html**）。接着就会看到打开了一个**127.0.0.1:8080**的网页。退出该服务器，在命令行使用：**ctrl+c**

## 配置
1、默认端口号为8080，如果想修改，最简单的方式是启动的时候添加启动参数：```live-server --port=8081```即可

2、在**package.json**中进行配置

（1）初始化项目**npm init**，之后会自动生成一个管理第三方依赖包的package.json

（2）修改package.json中scripts部分

“scripts”: {
“server”: “live-server ./ –port=8081”
}

1
或者

“scripts”: {
“server”: “live-server 某个目录”
}

```

（3）通过npm run server启动