npm 安装browser-sync 实时监听本地网页文件的变化

2017-09-11 19:32:34来源:CSDN作者:u013233097人点击

分享

近期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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台