近期get了一项新的技能，使用browser-sync实时监测文件修改，自动在浏览器中刷新页面。今天就把具体的安装和使用方法教给大家。
windows 下 打开cmd：
1,输入安装命令：
npm install -g browser-sync
2，判断是否成功：
输入命令：
browser-sync --version
3，使用：
找到 我们需要检测的 文件输入命令，启动一个服务实时监测文件变化 ：
index.html 为我们需要监听的 文件：
文件内容：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8">
<title>
标题
</title>
</head>
<body>
<div class="ui container" style="padding:30px">
<button class="ui green button">这是个按钮</button>
<div id="app"></div>
</div>
<!-- <link rel="stylesheet" href="jspm_packages/github/Semantic-Org/Semantic-UI@2.2.13/semantic.min.css"> -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<!--这是我们需要禁掉的 script语句-->
<script>
System.import('app/main');
</script>
</html>
你需要 cd到 该目录 执行命令：
然后系统会自动打开浏览器 ，打开我们的监听文件:
browser-sync start --server --no-notify --files 'index.html,app/**/*.js'禁掉index.html 中以下语句后， 刷新界面，我们的界面会自动发生改变。
<script>
System.import('app/main');
</script> 修改前：
修改后：
main.js 只是引入了semantic-ui样式：
'use strict'
import 'jspm_packages/github/Semantic-Org/Semantic-UI@2.2.13/semantic.min.css!';有人会问 为什么要这样？直接本地访问也可可以浏览：
因为当我们使用 file：// 浏览本地index.html 和 启动服务 使用http://访问时。效果可能一样，但有时会碰到浏览器跨域的问题。
可能导致上述语句如 system.import 失效。
因此 需要注意。
介绍一片跨域问题的文章：
http://www.cnblogs.com/zuoci/p/7239891.html
扫一扫
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
