browsersync的使用方法

た入场券 2021-09-15 05:32 585阅读 0赞

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

![70 6][]

![70 7][]

使用browsersync两年时间了，最近一段时间放弃了，

不是browsersync的问题，是自己的问题，简单的说是，

以前项目都是静态文件，直接用browsersync自带服务器跑起来就好，

后来用nodejs express做项目，用到了arttemplate当模版渲染，

发现每次修改html后，必须重启nodejs才能生效，

导致browsersync失效了，

后来就放弃了。

今天花了点时间找了下原因，原来是arttemplate默认开启缓存导致，坑。

修改这个代码就好了：

<table style="width:1200px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin:0px;padding:0px;">
      1 
    </div></td> 
   <td> 
    <div style="margin:20px auto 0px;padding:0px;width:1156px;"> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">template.config(</code> 
      <code style="font-size:14px;line-height:22px;">'cache'</code> 
      <code style="font-size:14px;line-height:22px;">,&nbsp;</code> 
      <code style="padding:4px 5px 2px;font-size:14px;margin-right:5px;line-height:22px;">false</code> 
      <code style="font-size:14px;line-height:22px;">);</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

### 【安装】 ###

<table style="width:1200px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin:0px;padding:0px;">
      1 
    </div></td> 
   <td> 
    <div style="margin:20px auto 0px;padding:0px;width:1156px;"> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">npm&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">install</code>&nbsp; 
      <code style="font-size:14px;line-height:22px;">-g&nbsp;browser-</code> 
      <code style="font-size:14px;line-height:22px;">sync</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

### 【静态项目使用browsersync】 ###

自己可以去browsersync官网查看，其实使用很简单，总结下就是：

<table style="width:1200px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin:0px;padding:0px;">
      1 
    </div></td> 
   <td> 
    <div style="margin:20px auto 0px;padding:0px;width:1156px;"> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">browser-</code> 
      <code style="font-size:14px;line-height:22px;">sync</code>&nbsp; 
      <code style="font-size:14px;line-height:22px;">start&nbsp;--server&nbsp;--files&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">"**/*.css,&nbsp;**/*.html,&nbsp;**/*.js"</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

cd到项目下，然后执行上面的方法即可，

简单的说就是会监听该目录下的html，css，js变化，然后自动刷新页面

### 【动态项目使用browsersync】 ###

动态项目的意思，就是用java，php，nodejs跑起来的项目，同时又想监听html，css，js的变化，

拿nodejs来说，跑起一个端口9007的项目：

![1.png][]

然后用browsersync的proxy做代理，监听这个项目：

![2.png][]

代码：

<table style="width:1200px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin:0px;padding:0px;">
      1 
    </div></td> 
   <td> 
    <div style="margin:20px auto 0px;padding:0px;width:1156px;"> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">browser-sync&nbsp;start&nbsp;--proxy&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">"localhost:9007"</code>&nbsp; 
      <code style="font-size:14px;line-height:22px;">--files&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">"static/**/*.css,&nbsp;static/**/*.js,&nbsp;views/**/*.html"</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

和静态项目的不同点是：

静态项目：用browsersync自带的server跑起来

动态项目：用java，php，nodejs跑起来，然后通过代理监听项目静态资源

### 【browsersync】    ###

如果每次输入命令行麻烦，可以用browsersync的api方式，

就是在项目下新建一个bs.js文件，然后内容如下：

<table style="width:1200px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div style="margin:0px;padding:0px;">
      1 
    </div> 
    <div style="margin:0px;padding:0px;">
      2 
    </div> 
    <div style="margin:0px;padding:0px;">
      3 
    </div> 
    <div style="margin:0px;padding:0px;">
      4 
    </div> 
    <div style="margin:0px;padding:0px;">
      5 
    </div> 
    <div style="margin:0px;padding:0px;">
      6 
    </div> 
    <div style="margin:0px;padding:0px;">
      7 
    </div> 
    <div style="margin:0px;padding:0px;">
      8 
    </div> 
    <div style="margin:0px;padding:0px;">
      9 
    </div> 
    <div style="margin:0px;padding:0px;">
      10 
    </div> 
    <div style="margin:0px;padding:0px;">
      11 
    </div> 
    <div style="margin:0px;padding:0px;">
      12 
    </div> 
    <div style="margin:0px;padding:0px;">
      13 
    </div> 
    <div style="margin:0px;padding:0px;">
      14 
    </div> 
    <div style="margin:0px;padding:0px;">
      15 
    </div> 
    <div style="margin:0px;padding:0px;">
      16 
    </div> 
    <div style="margin:0px;padding:0px;">
      17 
    </div> 
    <div style="margin:0px;padding:0px;">
      18 
    </div> 
    <div style="margin:0px;padding:0px;">
      19 
    </div> 
    <div style="margin:0px;padding:0px;">
      20 
    </div> 
    <div style="margin:0px;padding:0px;">
      21 
    </div> 
    <div style="margin:0px;padding:0px;">
      22 
    </div> 
    <div style="margin:0px;padding:0px;">
      23 
    </div> 
    <div style="margin:0px;padding:0px;">
      24 
    </div></td> 
   <td> 
    <div style="margin:20px auto 0px;padding:0px;width:1156px;"> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">//&nbsp;require&nbsp;加载&nbsp;browser-sync&nbsp;模块</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="padding:4px 5px 2px;font-size:14px;margin-right:5px;line-height:22px;">var</code>&nbsp; 
      <code style="font-size:14px;line-height:22px;">bs&nbsp;=&nbsp;require(</code> 
      <code style="font-size:14px;line-height:22px;">'browser-sync'</code> 
      <code style="font-size:14px;line-height:22px;">).create();</code> 
     </div> 
     <div style="margin:0px;padding:0px;">
       &nbsp; 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">//&nbsp;.init&nbsp;启动服务器</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">bs.init({ </code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">proxy&nbsp;&nbsp; :&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">'localhost:9007'</code> 
      <code style="font-size:14px;line-height:22px;">,</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">port&nbsp;&nbsp;&nbsp; :&nbsp;9017,</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">ui&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :&nbsp;{ </code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">port:&nbsp;9027</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">},</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">files&nbsp;&nbsp; :&nbsp;[</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">'static/**/*.css'</code> 
      <code style="font-size:14px;line-height:22px;">,</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">{ </code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">match:&nbsp;[</code> 
      <code style="font-size:14px;line-height:22px;">'views/**/*.html'</code> 
      <code style="font-size:14px;line-height:22px;">],</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">fn:&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="padding:4px 5px 2px;font-size:14px;margin-right:5px;line-height:22px;">function</code>&nbsp; 
      <code style="font-size:14px;line-height:22px;">(event,&nbsp;file){ </code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bs.reload();</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">}</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">}</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-size:14px;line-height:22px;">]</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">});</code> 
     </div> 
     <div style="margin:0px;padding:0px;">
       &nbsp; 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">//&nbsp;现在请BS，而不是方法</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">//&nbsp;主Browsersync模块出口</code> 
     </div> 
     <div style="margin:0px;padding:0px;"> 
      <code style="font-size:14px;line-height:22px;">bs.reload(</code> 
      <code style="font-size:14px;line-height:22px;">'*.html'</code> 
      <code style="font-size:14px;line-height:22px;">);</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

启动的时候使用node bs.js即可

具体api查看：[http://www.browsersync.cn/docs/api/][http_www.browsersync.cn_docs_api]

[70]: /images/20210813/0a26b8b6f52d42d3a8c16b5e1f81d2f5.png
[70 1]: /images/20210813/0c15505087074eaaae9ab5aa75924e2e.png
[70 2]: /images/20210813/3620121970c04df996638af3c1a18fcd.png
[70 3]: /images/20210813/fee827c547c546bba785597c237d4c8e.png
[70 4]: /images/20210813/3a5cc3db64a8472487fafb6bf13d4fe5.png
[70 5]: /images/20210813/1da9ae1965e24a0da03e310ff4ee3ca8.png
[70 6]: /images/20210813/14e023e072a140c69af383c83e55096a.png
[70 7]: /images/20210813/d29a86ff1e9445ab8fcedb32d762ca50.png
[1.png]: http://7sbnhi.com1.z0.glb.clouddn.com/@/images/20170517/1494992293631059332.png
[2.png]: http://7sbnhi.com1.z0.glb.clouddn.com/@/images/20170517/1494992354836032463.png
[http_www.browsersync.cn_docs_api]: http://www.browsersync.cn/docs/api/