前端神器：BrowserSync & live-server

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

browserSync

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

安装

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

使用

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

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

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

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

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。参考官方文档修改这个文件，然后运行：
browser-sync start --config bs-config.js就将以其完整配置信息运行BrowserSync。使用ctrl+c可以终止当前目录，清空用cls命令

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"
 }

或者

"scripts": {
	"server": "live-server 某个目录"
}

（3）通过npm run server启动