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

来源：互联网发布：电气控制柜设计软件编辑：程序博客网时间：2024/05/23 07:23

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

阅读全文

0 0