Question

browsersync-ssi怎么安装

Answer 1

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

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

npm install -g browser-sync
然后，就可以开始使用了。打开控制台进入项目所在的目录，然后输入像这样的命令：

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
下面是我运行时临时截了一张图

3001端口是后台地址，里面可自己开启和关闭一些功能，想要终止当前目录，用ctrl+c命令打断即可，清空用cls命令
另外也可以通过gulp使用这个工具，Gulp是现在流行的自动化工具，但BrowserSync并没有Gulp插件版，因为并不需要。
BrowserSync有自己独立的API，将它注册为gulp的一个task即可，送上官方的传送门

Answer 2

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

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

npm install -g browser-sync
然后，就可以开始使用了。打开控制台进入项目所在的目录，然后输入像这样的命令：

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
下面是我运行时临时截了一张图

3001端口是后台地址，里面可自己开启和关闭一些功能，想要终止当前目录，用ctrl+c命令打断即可，清空用cls命令
另外也可以通过gulp使用这个工具，Gulp是现在流行的自动化工具，但BrowserSync并没有Gulp插件版，因为并不需要。
BrowserSync有自己独立的API，将它注册为gulp的一个task即可，送上官方的传送门

Answer 3

有2种模式：1、响应式设计模式，此模式通过快捷键F12进入，可以设置固定分辨率，并通过开启移动模式激活移动端交互的事件，直接模拟移动端。但是此模式下，分辨率效果与真设备下显示还是存在差异，当仿真度要求较高时，就需要用到下面的方式。2、远程调试。此时需要开启移动设备的远程调试功能，然后将设备与开发机器通过usb链接，之后即可进行相关调试。