Browser-Sync 前端自动刷新工具

1.功能: 你写好代码，按下Ctrl + S, 浏览器自动刷新当前页面

2.你可以分屏写代码-预览，提高开发效率，提升学习兴趣。

3.搭配WebStorm使用更佳

4. 快速开始 链接: https://pan.baidu.com/s/1nvccYk5 密码: xvcc

使用说明

1.安装Nodejs:

Nodejs中文网下载

Nodejs: 话说有个叫Ryan Dahl的歪果仁，他的工作是用C/C++写高性能Web服务。对于高性能，异步IO、事件驱动是基本原则，但是用C/C++写就太痛苦了。于是这位仁兄开始设想用高级语言开发Web服务。他评估了很多种高级语言，发现很多语言虽然同时提供了同步IO和异步IO，但是开发人员一旦用了同步IO，他们就再也懒得写异步IO了，所以，最终，Ryan瞄向了JavaScript。因为JavaScript是单线程执行，根本不能进行同步IO操作，所以，JavaScript的这一“缺陷”导致了它只能使用异步IO。选定了开发语言，还要有运行时引擎。这位仁兄曾考虑过自己写一个，不过明智地放弃了，因为V8就是开源的JavaScript引擎。让Google投资去优化V8，咱只负责改造一下拿来用，还不用付钱，这个买卖很划算。于是在2009年，Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。虽然名字很土，但是，Node第一次把JavaScript带入到后端服务器开发，加上世界上已经有无数的JavaScript开发人员，所以Node一下子就火了起来。

2.搭建环境browser-sync

方法一: 安装全局browser-sync

npm install browser-sync -g

你需要需要使用服务器模式, BrowserSync可以启动一个小型服务器，并提供一个URL来供你查看你的网站,首先我们去到项目目录:

// windws, 我的工程在H:/workspace/wivwiv 下面
    // 进入H盘
    H:
    // 进入文件夹
    cd workspace/wivwiv
    // 查看当前文件
    dir

// 类UNIX系统, 我的工程在 ~/workspace/wivwiv下面
    // 进入文件夹, ~/ 表示当前用户家目录
    cd ~/workspace/wivwiv
    // 查看当前文件
    ls

使用执行命令，启动服务器:

// --files: 路径是相对于运行该命令的项目（目录）

browser-sync start --server --files "css/*.css, js/*.js, *.html"

// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 

browser-sync start --server --files "**/*.css, **/*.html, **/*.js"

稍后服务启动，这时候你打开编辑器，随便去更改js, html, css文件等，观察页面刷新变化吧

敲键盘: 无脑的命令

# 打开命令行
Ctrl + T
Win + R (windows系统记得管理员身份打开)

# 安装工具
npm install browser-sync -g

# 进入目录
cd ~/workspace/wivwiv

# 启动项目
browser-sync start --server --files "**/*.css, **/*.html, **/*.js"

注意事项

1、npm install 安装比较慢，需要安装好长时间：
使用 cnpm 进行安装.

2、browser-sync 提示 命令未找到 或者 command not found: windows上多半是环境变量的问题，
尝试使用 管理员身份 运行命令行并进行 npm install browser-sync -g 安装,还是不行的话 检查Nodejs npm环境变量

3、不会使用Nodejs、命令行等工具: 去学习一哈

参考地址

browser-sync自动刷新，释放你的F5

browsersync中文网

项目地址

码云-laboratory