美文网首页
1.Browsersync的使用

1.Browsersync的使用

作者: jqClub | 来源:发表于2017-10-11 22:30 被阅读0次

Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。

1. 安装 Node.js

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

http://www.runoob.com/nodejs/nodejs-install-setup.html

2.安装 BrowserSync

1)全局安装:

npm install -g browser-sync 

2)如果想要在项目中添加项目依赖,不适用全局安装,那么需要:

npm install browser-sync --save-dev

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

npm install --save-dev browser-sync

备注:建议使用NPM淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用 cnpm install [name]

cnpm install -g browser-sync

3.使用

1.进入文件夹目录
假设需要监听的是E:\Jqclub\MUI文件夹

1.打开win+r,输入cmd    回车
2.e:                  回车
3.cd E:\Jqclub\MUI    回车

2.输入:

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

回车


输入

3.使用地址


使用地址

然后使用,上面命令行给出的External去访问项目地址, 可以在不同浏览器,不同平台,只要保持设备在同一个网络环境,同一个网段,PC端防火墙允许这个入站规则,就可以同步显示所有的操作和更改。
它给出了两个端口一个是 3000,一个是3001,一个是项目界面,一个是管理界面,用于设置browsersync的选项。

备注:参考 [browsersync中文网]
[Tyro_java博客]

相关文章

  • gulp 自用总结

    1.Browsersync https://browsersync.io/#install 配合gulp插件使用:...

  • 1.Browsersync的使用

    Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷...

  • iconfont的使用(下载使用)

    1、下载文件 2、在生命周期中引入项目 beforeCreate () { var domModule = ...

  • Gson的使用--使用注解

    Gson为了简化序列化和反序列化的过程,提供了很多注解,这些注解大致分为三类,我们一一的介绍一下。 自定义字段的名...

  • 记录使用iframe的使用

    默认记录一下----可以说 这是我第一次使用iframe 之前都没有使用过; 使用方式: 自己开发就用了这几个属...

  • with的使用

    下面例子可以具体说明with如何工作: 运行代码,输出如下

  • this的使用

    什么是this? this是一个关键字,这个关键字总是返回一个对象;简单说,就是返回属性或方法“当前”所在的对象。...

  • this的使用

    JS中this调用有几种情况 一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象...

  • ==的使用

    积累日常遇到的编码规范,良好的编码习惯,持续更新。。。 日常使用==用于判断的时候,习惯性将比较值写前面,变量写后...

  • this的使用

    1.默认绑定,就是函数立即执行。 函数立即执行就是指向window,但是如果是node环境,就是指向全局conso...

网友评论

      本文标题:1.Browsersync的使用

      本文链接:https://www.haomeiwen.com/subject/iougyxtx.html