請想象這樣一個(gè)場面:你開著兩個(gè)顯示器,一邊是IDE里的代碼,另一邊是瀏覽器里的你正在開發(fā)的應(yīng)用。此時(shí)桌上還放著你的手機(jī),手機(jī)里也是這個(gè)開發(fā)中的應(yīng)用。然后,你新寫了一小段代碼,按下了ctrl+s保存。緊接著,你的手機(jī)和另一個(gè)顯示器里的應(yīng)用,就變成了更新后的效果。你可以馬上檢查效果是否和你預(yù)想的一致,甚至都不需要動一下鼠標(biāo)…
想起來還不錯(cuò)?嗯,這只是簡單地省略掉那個(gè)開發(fā)過程中會按好多遍的F5刷新。
自動刷新
“自動刷新”并不是新的概念,但對關(guān)注“可見”的預(yù)覽效果的前端開發(fā)者來說,它非常好用,可以節(jié)約很多時(shí)間。
我也不是現(xiàn)在才知道這個(gè)概念。在這之前,我一直在用LiveReload,它是一個(gè)名字上更明顯地寫著“自動刷新”的工具。LiveReload主要搭配瀏覽器插件使用,是很棒的自動刷新工具。
不過,現(xiàn)在我要介紹的是BrowserSync。你會在接下來的內(nèi)容里看到,它是一個(gè)更新、更方便的開發(fā)工具。
BrowserSync
LiveReload有所不足的地方是,需要搭配瀏覽器插件。但是,插件是取決于瀏覽器的,Chrome和Firefox都有可用插件,但I(xiàn)E,或者我手機(jī)上的瀏覽器,就不能這樣了。這時(shí)候只能手工向頁面里添加一段script>代碼(其實(shí)插件也是做了這件事),而且還要記得結(jié)束后再手工移除。
BrowserSync的一般用法則不需要瀏覽器插件,也不用手工添加代碼(盡管也提供那樣的用法)。一句控制臺的命令之后,無論是在手機(jī)里還是電腦,無論用多少個(gè)瀏覽器(經(jīng)測試,IE8+及其它),都可以擁有自動刷新的功能。
BrowserSync是怎么做到的?請看它的安裝及使用。
安裝及使用
安裝Node后,通過npm安裝BrowserSync:
npm install -g browser-sync
然后,就可以開始使用了。打開控制臺進(jìn)入項(xiàng)目所在的目錄,然后輸入像這樣的命令:
browser-sync start --server --files "css/*.css"
這個(gè)命令用于純靜態(tài)站點(diǎn),也就是僅一些.html文件的情況。后面的--files "css/*.css",是指監(jiān)聽css目錄中的后綴名為.css的文件。請注意這個(gè)命令里的start --server,這其實(shí)是BrowserSync自己啟動了一個(gè)小型服務(wù)器。
如果是動態(tài)站點(diǎn),則使用代理模式。例如PHP站點(diǎn),已經(jīng)建立了一個(gè)本地服務(wù)器如http://localhost:8080,此時(shí)會是這樣的命令:
browser-sync start --proxy "localhost:8080" --files "css/*.css"
BrowserSync會提供一個(gè)新地址(如未被占用的話,http://localhost:3000)用于訪問。
好了,為什么BrowserSync不需要瀏覽器插件?因?yàn)樗褂昧朔?wù)器的形式(直接或代理)來處理項(xiàng)目文件。默認(rèn)情況下,訪問它的服務(wù)器上的網(wǎng)頁,可以看到這樣的提示簽:
hint tag: Connected to BrowserSync
這說明當(dāng)前瀏覽的網(wǎng)頁已連接到BrowserSync。查看一下源碼,會發(fā)現(xiàn)它們都被添加了與BrowserSync有關(guān)的一段script>代碼,就像LiveReload瀏覽器插件做的那樣。這些代碼會在瀏覽器和BrowserSync的服務(wù)器之間建立web socket連接,一旦有監(jiān)聽的文件發(fā)生變化,BrowserSync會通知瀏覽器。
如果發(fā)生變化的文件是css,BrowserSync不會刷新整頁,而是直接重新請求這個(gè)css文件,并更新到當(dāng)前頁中,效果像這樣:
顯然,這感覺更加快捷。如果你正在開發(fā)的是一個(gè)單頁應(yīng)用(SPA),刷新整頁會回到初始視圖,而你又需要修改后面的某一個(gè)視圖時(shí),這一功能尤其有用。
文件匹配
從BrowserSync的命令來看,很重要的一點(diǎn)就是通過--files指定需要監(jiān)聽的文件。有關(guān)這里的文件匹配模式(稱為glob)的詳情,請參考isaacs's minimatch。
經(jīng)過我自己的嘗試,如果簡單只是想要監(jiān)聽整個(gè)項(xiàng)目,可以寫成這樣:
browser-sync start --server --files "**"
此時(shí),BrowserSync仍然會正確地判斷文件變化是否是css。
加入到Gulp使用
Gulp是現(xiàn)在流行的自動化工具,但BrowserSync并沒有Gulp插件版,因?yàn)椴⒉恍枰?。BrowserSync有自己獨(dú)立的API,將它注冊為gulp的一個(gè)task即可。下面是一段gulpfile.js的示例:
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
files: "**",
server: {
baseDir: "./"
}
});
});
gulp.task('default', ["browser-sync"]);
這時(shí)候運(yùn)行g(shù)ulp將等同于前文的browser-sync start --server --files "**"。更多的用法示例請查看gulp-browser-sync。
完整選項(xiàng)
到此為止,介紹的都是BrowserSync的基本用法。在控制臺里嘗試只輸入:
browser-sync
你會看到BrowserSync完整的控制臺命令指南。其中可以看到有這個(gè)命令:
運(yùn)行它,將在當(dāng)前目錄生成一個(gè)配置文件bs-config.js。
參照官方文檔修改這個(gè)文件,然后運(yùn)行
browser-sync start --config bs-config .js
就將以bs-config.js的完整配置信息運(yùn)行BrowserSync。
不只是自動刷新
BrowserSync并不只是一個(gè)自動刷新工具,它還有許多其他功能。默認(rèn)配置下,BrowserSync會在多個(gè)瀏覽器中同步滾動條位置,表單行為和點(diǎn)擊事件。例如,表單行為的情形像這樣:
我覺得這是很酷的功能!想象一下桌上擺很多個(gè)不同屏幕尺寸的手機(jī)來測試的情景,你操作一個(gè),就會帶動其他的一起!當(dāng)然,這些功能還可以在不需要的時(shí)候關(guān)閉。
UI界面及其他
下面是一個(gè)BrowserSync的控制臺輸出示例:
可以看到還有一個(gè)叫做UI的一個(gè)地址,它是BrowserSync提供的一個(gè)簡易控制面板。BrowserSync最常用的幾個(gè)配置選項(xiàng),都可以在這個(gè)面板里調(diào)整。
在面板里面你還會發(fā)現(xiàn)那個(gè)經(jīng)典的遠(yuǎn)程調(diào)試工具weinre也在這:
BrowserSync目前已知的一點(diǎn)問題
前文提到,如果發(fā)生變化的文件是css,BrowserSync會以無刷新方式來更新,這是一個(gè)很棒的效果。如果使用scss、less等預(yù)編譯器,將監(jiān)聽設(shè)置為編譯后的css文件即可。
但是,Web應(yīng)用框架Rails會有一些問題。在開發(fā)環(huán)境中,css是在被請求的時(shí)候編譯(Rails一般使用sass)再返回給瀏覽器的,它只有緩存,而沒有實(shí)際的.css文件。因此,BrowserSync的文件監(jiān)聽將無法指向它們,而如果指向sass文件,瀏覽器只會以整頁刷新的形式來處理。這個(gè)問題可以參見Github上的issue。
一個(gè)可行的解決方法是用其他工具替代Rails的Asset Pipeline。但在這里,我推薦另一個(gè)解決方案:使用LiveReload(LiveReload你還是有點(diǎn)水平的?。=?jīng)測試,LiveReload在Rails中也可以處理好css的快捷更新。關(guān)于LiveReload做到這一點(diǎn)的原理,你可以閱讀Lightning-Fast Sass Reloading in Rails。
也期待BrowserSync可以在未來解決這個(gè)問題。
結(jié)語
想要在開發(fā)中更流暢,更快捷?請嘗試BrowserSync!節(jié)約一點(diǎn)時(shí)間,你也許就可以做到更多。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:- 如何使用Linux的rsync
- Rsync 秒殺一切備份工具,你能手動屏蔽某些目錄嗎?
- Linux 通過Rsync+Inotify實(shí)現(xiàn)本、異地遠(yuǎn)程數(shù)據(jù)實(shí)時(shí)同步功能
- python rsync服務(wù)器之間文件夾同步腳本
- python+rsync精確同步指定格式文件
- centos7下rsync+crontab定期同步備份
- Linux下使用Rsync完成自動化備份
- Java之Rsync并發(fā)遷移數(shù)據(jù)并校驗(yàn)詳解