npm安装browser-sync实时监听本地网页

制作网页为了看到最新的效果,避免不了F5刷新网页,但是频繁F5会显得整个工作很繁琐,所以今天学到怎么实时监听本地网页。

第一,要确认你是否安装了node;

第二,新版的node已经集成了npm,所以不需要再安装,只需要通过命令将相关配置配好即可。关于如何配置的详细过程不做介绍,本文主要讲如何安装使用browser-sync。

1、打开cmd命令窗口或者gitbash,运行以下命令:(安装过程中有选择直接按回车即可)

npm install -g browser-sync

这里要注意最好使用-g表示在全局下安装它们,这样可以在任何目录中使用。

判断有没有安装成功,如下图:

2、进入你的项目文件根目录,启动Browser-sync。

$ browser-sync start --server 

这里要注意一定要进入项目的根目录,否则会像上图显示找不到。

第二个要注意的是,

$ browser-sync start --server 后面加你想要监听的文件名或者是文件后缀表示想要监听的文件类型。

$ browser-sync start --server --files "index.html,app/**/*.js"

我这里表示是项目中一级目录下的index.html文件和项目中一级目录app文件里面的所有.js文件,如果想要多个文件中间用逗号隔开即可。


最后就能见到上图中的效果。然后如果想改button的颜色,可以直接进入sublime修改css,并保存,就能实时看到页面中的变化,不需要手动f5刷新。

这是我今天学到的很简单的安装过程,本人小白,有表达不到位或者不对的地方请多多指教。

你可能感兴趣的:(npm安装browser-sync实时监听本地网页)