多终端同步工具

BrowserSync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面，可以同时在PC、平板、手机等设备下进项调试。PC、ipad、iphone、android等设备同时打开需要调试的页面后，任何一次代码保存，所有设备都会同时显示改动。在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。

平台：Mac, Windows, Linux

收费情况：免费

特点：自动开启本地服务器，监听文件变动自动在所有设备自动刷新。

使用步骤：

1、下载并安装 Node

2、安装 Browsersync

npm install -g browser-sync

3、启动BrowserSync

• 静态站点：在本地页面所在文件夹位置执行

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

  --files 后代表所要监听的文件类型。

• 动态站点

  browser-sync start --proxy "myproject.dev" --files "css/*.css"
  

命令执行后，本地会自动开启服务器，浏览器会自动打开当前文件夹的index.html页面。其他设备可访问External网址，文件的任何的改动或者页面的操作都有同步到所有打开此页面的设备。

Remote Preview

平台：Mac, Windows, Linux

收费情况：免费

特点： Remote preview是一个 托管HTML页面和内容，并可以显示在多个设备上的开源工具，会每隔1100毫秒发起一个XHR请求，去检查配置文件中的URL有没有发生变化。如果检测到变化，脚本会更新每个设备中iframe的src属性，把页面加载进来。如果没有检测到变化，脚本会保持轮询直到检测到变化。

使用步骤：

• 下载Remote Preview，并把所有文件移到本地可访问的服务器中。服务器可以是Dropbox，一个开发服务器，或者其他。
• 在所有目标设备上加载刚才下载的“index.html”文件。这个页面会把你想测试的页面作为iframe加载进来。
• 修改“url.txt”（包括下载包里的和服务器上的），将需要测试的URL写入文件，并保存。
• Remote Preview会感知到url.txt发生了变化，然后会自动刷新所有设备的页面，来加载你的URL。

Grunt + live-reload

gulp-livereload

平台：Mac, Windows, Linux

使用步骤：

1、全局安装gulp，当前目录部署 gulp 和 gulp-livereload

npm install gulp -g
npm install gulp gulp-livereload --save-dev

2、安装Chrome插件

3、修改gulpfile.js文件，执行gulp watch

var gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch', function () {
    var server = livereload();

    // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件
    gulp.watch('app/**/*.*', function (file) {
        server.changed(file.path);
    });
});

本地IP:3000访问页面，当你修改文件夹下的任何文件后保存，命令行都会有内容输出，监控到文件的变化，浏览器插件会自动刷新页面。

Emmet LiveStyle

平台：Chrome，Safari和Sublime Text

• 安装LiveStyle：Ctrl + Shift + P -> Install Package -> LiveStyle
• 安装Chrome插件
• 启动Sublime Text，并打开项目中的一个CSS文件
• 开启Chrome，并打开你想编辑CSS的那个页面
• 打开开发者工具，以及LiveStyle面板，勾选“Enable LiveStyle”选项。注意：在编辑过程中要保持开启开发者工具，这样实时的编辑才可以生效。
• 这一切都开启后，一个样式列表将会出现在左侧，你的编辑器文件出现在右侧。选择编辑器中的文件与浏览器关联起来。

现在，当你编辑，创建，打开或关闭文件，编辑器的文件列表将会自动更新。