三种工具的使用:
liveStyle
Emmet LiveStyle有如下几个特点:
1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中,只要有一处修改,两个工具的样式都会更改。)
4. 便捷的安装和使用。
支持三种CSS, LESS and SCSS
需要安装浏览器的插件和编辑器的插件
安装浏览器的插件
1.浏览器插件通过搜索chrome网上商店“Emmet liveStyle”进行安装
2.点击右上角的添加至Chrome按钮
如果你的chrome应用商店无法打开,你从 http://pan.baidu.com/s/1qYO2C36 或者其他途径获得了Emmet LiveStyle插件,那么就选择离线安装该插件。由于Emmet LiveStyle插件同其他chrome插件一样都是CRX格式的,下载完成后,新开一个TAB,输入chrome://extensions/ 打开下载管理器,找到刚刚下载成功的文件,拖放刚刚的crx文件到界面里,松开鼠标,会弹出安装提示,点击确定安装就可以了。
控制台出现如下图显示的样子,即为安装成功。
安装编辑器的插件
安装Sublime Text插件最简单的方法就是通过Package Control,这是安装Sublime Text插件比较好的方式:Package Control会管理所有的插件安装的流程,为你进行自动更新。
1.正如描述所说的安装Package Control(如果你到现在还没有安装Package Control)。
2.在Sublime Text中点击Tools > Command Palette…菜单栏。
3.在弹出的对话框,输入install package来找到Package Control: Install Package菜单栏,用方向键进行选择然后敲击回车。
4.当载入完成,你可以看到带有可用的包列表的对话框,输入livestyle来找到LiveStyle包,然后敲击回车。
过一会LiveStyle插件就会成功安装,你可能会重启Sublime Text来确保所有的东西都正常工作。
在你相继安装浏览器插件以及编辑器插件后,你就可以开始使用LiveStyle。
LiveStyle的所有的设置都是通过Google Chrome扩展控制的:
打开一个需要测试的网页,然后开启livestyle监测样式的变化即可。
liveReload
可参考http://blog.csdn.net/neet007/article/details/51694643 LiveReload插件安装、配置及用法
Broswer-Sync:官网 http://www.browsersync.cn/
描述:修改监控的文件后,自动刷新页面
1.包管理(npm
)库中 安装BrowserSync
。打开一个终端窗口,运用npm
全局安装browser-sync
,安装完成后,可以在所有项目(任何目录)中使用。
npm install -g browser-sync
也可以结合 gulpjs
或gruntjs
构建工具来使用,在您需要构建的项目里运行下面的命令:
npm install --save-dev browser-sync
2.主要是运用browser-sync start --server --files "**"
命令来监控文件,假如你要监控D:\dist\core\static
整个目录下的文件,那你就可以 cd
跳到这个目录下运行:
cd D:\dist\core\static
D:\dist\core\static>browser-sync start --server --files "**"//监控该目录下的所有文件的变化
回车
3.启动 BrowserSync
静态网站
如果您想要监听.css
文件, 您需要使用服务器模式。 BrowserSync
将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html文件
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000
地址,这一切都会在命令行工具里显示。
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
动态网站
如果您已经有其他本地服务器环境PHP
或类似的,您需要使用代理模式。 BrowserSync
将通过代理URL(localhost:3000)
来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP
服务器环境,并通过绑定Browsersync.cn
来访问本地服务器,使用以下命令方式,Browsersync
将提供一个新的地址localhost:3000
来访问Browsersync.cn
,并监听其css
目录下的所有css
文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
参考文章:http://blog.csdn.net/neet007/article/details/51694643 LiveReload插件安装、配置及用法