前端瀏覽器自動刷新神器：Browsersync

 

【安裝】

1	npm  install  -g browser- sync

 

【靜態項目使用browsersync】

本身能夠去browsersync官網查看，其實使用很簡單，總結下就是：

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

cd到項目下，而後執行上面的方法便可，

簡單的說就是會監聽該目錄下的html，css，js變化，而後自動刷新頁面

 

【動態項目使用browsersync】

動態項目的意思，就是用java，php，nodejs跑起來的項目，同時又想監聽html，css，js的變化，

拿nodejs來講，跑起一個端口9007的項目：

而後用browsersync的proxy作代理，監聽這個項目：

代碼：

1	browser-sync start --proxy  "localhost:9007"  --files  "static/**/*.css, static/**/*.js, views/**/*.html"

 

和靜態項目的不一樣點是：

靜態項目：用browsersync自帶的server跑起來

動態項目：用java，php，nodejs跑起來，而後經過代理監聽項目靜態資源

 

【browsersync】

若是每次輸入命令行麻煩，能夠用browsersync的api方式，

就是在項目下新建一個bs.js文件，而後內容以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// require 加載 browser-sync 模塊 var  bs = require( 'browser-sync' ).create();   // .init 啓動服務器 bs.init({      proxy   :  'localhost:9007' ,      port    : 9017,      ui      : {          port: 9027      },      files   : [          'static/**/*.css' ,          {              match: [ 'views/**/*.html' ],              fn:     function  (event, file){ //              bs.reload();              }          }      ] });   // 如今請BS，而不是方法 // 主Browsersync模塊出口 bs.reload( '*.html' );

啓動的時候使用node bs.js便可

具體api查看：http://www.browsersync.cn/docs/api/

 

【end】

之後能夠爽快的開發了~

 

*** nodejs express作項目遇到的問題：

用到了arttemplate當模版渲染，

發現每次修改html後，必須重啓nodejs才能生效，

致使browsersync失效了，

後來就放棄了。

 

今天花了點時間找了下緣由，原來是arttemplate默認開啓緩存致使，坑。

修改這個代碼就行了：

1	template.config( 'cache' ,  false );