Browsersync使用教程

       

1分钟快速使用 Browsersync

1. 下载安装 nodejs

2. 命令行窗口 ( 全局安装 browsersync )：
   npm install -g browser-sync

3. 在 项目文件夹 内同时按住 shift 和 右击（cd命令至目标文件夹也可以，在路径的地方输入cmd后回车键也可以），可以看到在此处打开命令窗口, 点击打开命令行窗口

4. 在命令行窗口内输入以下命令

   browser-sync start --server --files "**"

   ( 启动 Browsersync，--server 默认以当前目录为服务器根目录，--files 后面要记得空一格再写要监听的文件，**表示监听所有文件，一旦文件修改浏览器自动刷新，适合小型项目 )

5. 最实用的两大功能：代码文件修改并保存后浏览器页面自动刷新，同一局域网下手机（连 WIFI）可进行页面的联调。

详细：

       BrowserSync真是前端必备神器，浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页，省去了手动的环节，大大的节省了开发时间，这个工具是基于nodejs的，可以通过npm安装，不在啰嗦

安装Node后，通过npm安装BrowserSync：

npm install -g browser-sync

       然后，就可以开始使用了。打开控制台进入项目所在的目录（cd 项目目录），然后输入像这样的命令：

browser-sync start --server --files "css/*.css"

        这个命令用于纯静态站点，也就是仅一些.html文件的情况。后面的--files "css/*.css"，是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server，这其实是BrowserSync自己启动了一个小型服务器。

       如果是动态站点，则使用代理模式。例如PHP站点，已经建立了一个本地服务器如http://localhost:8080，此时会是这样的命令：

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

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

      如果简单只是想要监听整个项目，可以写成这样：

browser-sync start --server  --files "**"

     在控制台里尝试只输入：

browser-sync

      你会看到BrowserSync完整的控制台命令指南。其中可以看到有这个命令：

browser-sync init

       运行它，将在当前目录生成一个配置文件bs-config.js。

       参照官方文档修改这个文件，然后运行

browser-sync start --config bs-config .js

       就将以bs-config.js的完整配置信息运行BrowserSync