开发工具

一、liveStyle（本人win10）

1.作用：实时更新css/less/sass

2.设备：chrome + livestyle + sublime3/2 + packagecontrol (https://packagecontrol.io/) + 翻墙软件

3.步骤：

a、下载sublime3和chrome。

b、在谷歌应用商店搜索livestyle，并添加到chrome。（翻墙）

下图，我已经添加好了，没添加过的点一下就可以添加了，并且右上角多了个球星的东西。

c、进入packagecontrol官网——点击 Install Now —— 找到sublime3/2的代码（大的红色矩形框内代码）复制。

d、打开sublime3/2–>view–>show console粘贴刚才复制代码回车，等待一会console弹出新内容后在重启sublime。（在这之前断开vpn软件连接）

e、重启sublime后,按Ctrl+shift+p，在框中输入pc选择install package点击，如果弹出新的输入框，则输入livestyle匹配，若下拉框里有livestyle则点击，等待一会重启可用。否则可能安装失败，从新检查自己的操作。

f、调试

二、livereload

1.作用： 实时刷新js/html/css等更新（代替自己按F5），支持gulp可以自己配置高级应用。

2.需要： node.js + chrome + livereload + 翻墙软件 + 简单的windows的命令

3.步骤：

a、打开chrome——应用商店——搜索livereload——添加。（左侧应用商店，右侧添加后图标，vpn翻墙安装插件）；

b、下载安装node.js 快捷键 win + r ——输入cmd进入命令终端——node -v（弹出node版本即安装成功）。

c、打开命令终端——输入 npm install -g livereload 安装livereload。

d、在命令终端进入需要打开的html文件的目录。（cd url(文件所在路径) ）输入livereload启动。

e、用chrome打开html文件，点击a步骤右上角的图标，中间的原点变为实心时则打开（每个新打开的html都需要点击它）。如果不可用，可能需要在chrome中找到 “设置——拓展程序——勾选允许访问文件网址”。

三、browser-sync

1.作用：实时刷新js/html/css等更新，支持gulp等，更多优点请去官网。（不限制编辑器和浏览器）

2.需要：node.js

3.步骤：

a、打开node.js，输入“npm install -g browser-sync”安装browser-sync包。

b、进入html文件所在目录，输入（browser-sync start –server –files “**”）注意server和files前边是双中线，现在默认打开的是index.html，需要访问哪个html就把那个写上。启动所有文件包括html，css，js。等待页面打开。（ 输入：browser-sync start –server –files “css/*.css” 启动所有的css）；

browser-sync start –server –files “html/sfsf.html” 启动sfsf.html文件