前端神器-Browsersync
【前言】
從去年5月份入職新公司到現在，一直很忙，抽不出空來寫部落格了，
有人會說時間擠擠總是有的，但是我可以告訴你，每天早上9點，晚上12點，週末休一天，
簡直是殘酷的，學習時間嚴重擠壓，
最近好點了，哈哈~
【browsersync】
有點標題黨了，不過這個工具確實可以提高很大的開發效率，
簡單的介紹就是，
使用前：
修改各種html，css，js，手動重新整理頁面看效果
和ui聯調的時候，ui坐旁邊，說一點改一點，重新整理頁面
使用後：
修改各種html，css，js，儲存後自動重新整理頁面，
和ui聯調的時候，丟給ui一個地址，然後你這邊修改儲存，她那邊自動重新整理，cool~
【放棄了一段時間】
使用browsersync兩年時間了，最近一段時間放棄了，
不是browsersync的問題，是自己的問題，簡單的說是，
以前專案都是靜態檔案，直接用browsersync自帶伺服器跑起來就好，
後來用nodejs express做專案，用到了arttemplate當模版渲染，
發現每次修改html後，必須重啟nodejs才能生效，
導致browsersync失效了，
後來就放棄了。
今天花了點時間找了下原因，原來是arttemplate預設開啟快取導致，坑。
修改這個程式碼就好了：
| 1 |
template.config(
'cache'
,
false
);
|
【安裝】
| 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】
以後可以爽快的開發了~
http://uikoo9.com/更多精彩內容
| 求打賞（長按圖片即可識別）~ |
 捐助列表：http://uikoo9.com/donate/ |
閱讀： 19次