码迷,mamicode.com
首页 > 其他好文 > 详细

browsersync使用

时间:2020-03-18 20:19:30      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:文档   构建   监测   follow   grunt   art   介绍   ice   article   

记得在学习Nodejs的时候有一个很好的Node模块吸引了我,它能对我修改的某一个css, js 或者目录的变化进行监控,然后我们可以通过浏览器来查看监听的服务下文件发生的变化!
下面我来简单的介绍一下它 当然我们也可以去官网直接找对应的使用文档,官网也是讲解的非常详细的

官网地址:browsersync

下面是我对Browersync使用的一个过程,希望对新手有点用处

首先BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js
npm库中安装 BrowserSync :

全局安装
//Mac下全局安装请在命令前加sudo
npm install -g browser-sync 

当然您也可以结合gulpjs或gruntjs构建工具来使用,在您需要构建的项目里运行下面的命令:

npm install --save-dev browser-sync
启动browsersync 也非常简单

比如我们要对这个vue项目中的index.html 及 index.js进行检测进行监测命令如下:

监控文件index.html 与index.js 文件的变化

browser-sync start --server -no-notify --file=‘index.html,index.js‘

如果有更深层次文件的监测可以使用如下命令:

browser-sync start --server --files ‘**/*.css, **/*.html‘

当然我们也可以对我们自己的项目开启代理监测 比如php类的项目:

在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。

browser-sync start --poerxy ‘www.fanxiao2.net‘ ‘**/.‘ 

本文转载至? ?范骏??的博客

browsersync使用

标签:文档   构建   监测   follow   grunt   art   介绍   ice   article   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12519533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!