自動刷新從BrowserSync開始_網頁編輯器

來源:腳本之家  責任編輯:小易  

百度搜索時自動刷新一般情況下都是瀏覽器的問題。建議:1:更換其它瀏覽器測試一下,看看是否還會自動更新。2:修復瀏覽器或升級到最新版本,再測試下是否自動更新。3:如果更換瀏覽器或升級瀏覽器后,問題依然存在,換一臺電腦再測試一下,如果沒有自動更新,那么電腦本身的問題,就是兼容問題www.anxorj.tw防采集請勿采集本網。

請想象這樣一個場面:你開著兩個顯示器,一邊是IDE里的代碼,另一邊是瀏覽器里的你正在開發的應用。此時桌上還放著你的手機,手機里也是這個開發中的應用。然后,你新寫了一小段代碼,按下了ctrl+s保存。緊接著,你的手機和另一個顯示器里的應用,就變成了更新后的效果。你可以馬上檢查效果是否和你預想的一致,甚至都不需要動一下鼠標…

打開瀏覽器,點“工具”→“管理加載項”那里禁用所有可疑插件,或者你能準確知道沒問題的保留。然后→工具→INTERNET選項→常規頁面→刪除cookies→刪除文件→鉤選刪除所有脫機內容→確定→設置

想起來還不錯?嗯,這只是簡單地省略掉那個開發過程中會按好多遍的F5刷新。

1、打開瀏覽器,點“工具”→“管理加載項”那里禁用所有可疑插件,或者你能準確知道沒問題的保留。然后→工具→INTERNET選項→常規頁面→刪除cookies→刪除文件這樣處理以后將自動刷新功能去掉。

自動刷新

對于電腦總是自動刷新可能由以下原因造成: 電腦可能被病毒感染?上螺d殺毒軟件進行殺毒。鍵盤 F5按鍵可能被異物卡住或鍵盤損壞。顯卡問題,顯卡驅動受損,顯卡老化或者顯示器的數據連接線松動,

“自動刷新”并不是新的概念,但對關注“可見”的預覽效果的前端開發者來說,它非常好用,可以節約很多時間。

尊敬的聯想用戶您好!尊敬的聯想用戶您好!您可以嘗試右擊桌面-屏幕分辨率-高級設置-監視器中,將屏幕刷新頻率調整一下,如果不行,您可以嘗試通過官網更新顯卡驅動。您可以通過以下鏈接下載您所需要的

我也不是現在才知道這個概念。在這之前,我一直在用LiveReload,它是一個名字上更明顯地寫著“自動刷新”的工具。LiveReload主要搭配瀏覽器插件使用,是很棒的自動刷新工具。

手機QQ瀏覽器可以自動刷新,如果您未曾添加過定時刷新工具,點擊菜單欄中的“…”。長按定時刷新小工具至菜單欄即可。在您想要設置定時刷新的頁面,打開定時刷新工具即可設置定時刷新的時間。

不過,現在我要介紹的是BrowserSync。你會在接下來的內容里看到,它是一個更新、更方便的開發工具。

BrowserSync

LiveReload有所不足的地方是,需要搭配瀏覽器插件。但是,插件是取決于瀏覽器的,Chrome和Firefox都有可用插件,但IE,或者我手機上的瀏覽器,就不能這樣了。這時候只能手工向頁面里添加一段<script>代碼(其實插件也是做了這件事),而且還要記得結束后再手工移除。

BrowserSync的一般用法則不需要瀏覽器插件,也不用手工添加代碼(盡管也提供那樣的用法)。一句控制臺的命令之后,無論是在手機里還是電腦,無論用多少個瀏覽器(經測試,IE8+及其它),都可以擁有自動刷新的功能。

BrowserSync是怎么做到的?請看它的安裝及使用。

安裝及使用

安裝Node后,通過npm安裝BrowserSync:

npm install -g browser-sync

然后,就可以開始使用了。打開控制臺進入項目所在的目錄,然后輸入像這樣的命令:

browser-sync start --server --files "css/*.css"

這個命令用于純靜態站點,也就是僅一些.html文件的情況。后面的--files "css/*.css",是指監聽css目錄中的后綴名為.css的文件。請注意這個命令里的start --server,這其實是BrowserSync自己啟動了一個小型服務器。

如果是動態站點,則使用代理模式。例如PHP站點,已經建立了一個本地服務器如http://localhost:8080,此時會是這樣的命令:

browser-sync start --proxy "localhost:8080" --files "css/*.css"

BrowserSync會提供一個新地址(如未被占用的話,http://localhost:3000)用于訪問。

好了,為什么BrowserSync不需要瀏覽器插件?因為它使用了服務器的形式(直接或代理)來處理項目文件。默認情況下,訪問它的服務器上的網頁,可以看到這樣的提示簽:

hint tag: Connected to BrowserSync

這說明當前瀏覽的網頁已連接到BrowserSync。查看一下源碼,會發現它們都被添加了與BrowserSync有關的一段<script>代碼,就像LiveReload瀏覽器插件做的那樣。這些代碼會在瀏覽器和BrowserSync的服務器之間建立web socket連接,一旦有監聽的文件發生變化,BrowserSync會通知瀏覽器。

如果發生變化的文件是css,BrowserSync不會刷新整頁,而是直接重新請求這個css文件,并更新到當前頁中,效果像這樣:

顯然,這感覺更加快捷。如果你正在開發的是一個單頁應用(SPA),刷新整頁會回到初始視圖,而你又需要修改后面的某一個視圖時,這一功能尤其有用。

文件匹配

從BrowserSync的命令來看,很重要的一點就是通過--files指定需要監聽的文件。有關這里的文件匹配模式(稱為glob)的詳情,請參考isaacs's minimatch。

經過我自己的嘗試,如果簡單只是想要監聽整個項目,可以寫成這樣:

browser-sync start --server  --files "**"

此時,BrowserSync仍然會正確地判斷文件變化是否是css。

加入到Gulp使用

Gulp是現在流行的自動化工具,但BrowserSync并沒有Gulp插件版,因為并不需要。BrowserSync有自己獨立的API,將它注冊為gulp的一個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"]);

這時候運行gulp將等同于前文的browser-sync start --server --files "**"。更多的用法示例請查看gulp-browser-sync。

完整選項

到此為止,介紹的都是BrowserSync的基本用法。在控制臺里嘗試只輸入:

browser-sync

你會看到BrowserSync完整的控制臺命令指南。其中可以看到有這個命令:

browser-sync init

運行它,將在當前目錄生成一個配置文件bs-config.js。

參照官方文檔修改這個文件,然后運行

browser-sync start --config bs-config .js

就將以bs-config.js的完整配置信息運行BrowserSync。

不只是自動刷新

BrowserSync并不只是一個自動刷新工具,它還有許多其他功能。默認配置下,BrowserSync會在多個瀏覽器中同步滾動條位置,表單行為和點擊事件。例如,表單行為的情形像這樣:

我覺得這是很酷的功能!想象一下桌上擺很多個不同屏幕尺寸的手機來測試的情景,你操作一個,就會帶動其他的一起!當然,這些功能還可以在不需要的時候關閉。

UI界面及其他

下面是一個BrowserSync的控制臺輸出示例:

可以看到還有一個叫做UI的一個地址,它是BrowserSync提供的一個簡易控制面板。BrowserSync最常用的幾個配置選項,都可以在這個面板里調整。

在面板里面你還會發現那個經典的遠程調試工具weinre也在這:

BrowserSync目前已知的一點問題

前文提到,如果發生變化的文件是css,BrowserSync會以無刷新方式來更新,這是一個很棒的效果。如果使用scss、less等預編譯器,將監聽設置為編譯后的css文件即可。

但是,Web應用框架Rails會有一些問題。在開發環境中,css是在被請求的時候編譯(Rails一般使用sass)再返回給瀏覽器的,它只有緩存,而沒有實際的.css文件。因此,BrowserSync的文件監聽將無法指向它們,而如果指向sass文件,瀏覽器只會以整頁刷新的形式來處理。這個問題可以參見Github上的issue。

一個可行的解決方法是用其他工具替代Rails的Asset Pipeline。但在這里,我推薦另一個解決方案:使用LiveReload(LiveReload你還是有點水平的。。經測試,LiveReload在Rails中也可以處理好css的快捷更新。關于LiveReload做到這一點的原理,你可以閱讀Lightning-Fast Sass Reloading in Rails。

也期待BrowserSync可以在未來解決這個問題。

結語

想要在開發中更流暢,更快捷?請嘗試BrowserSync!節約一點時間,你也許就可以做到更多。

果 在出現 這種情況 我給你提供四個方法(我也出現此種情況成功解決)1、右鍵“我的電腦”-屬性-高級-“性能”欄點擊“設置”-視覺效果-勾選“在桌面上為圖標標簽使用陰影”,點擊“應用”確定退出即可。2、右鍵桌面-排列圖標-在桌面上鎖定WEB項目前的勾去掉3、右擊桌面空白處,依次單擊“屬性/桌面/自定義桌面/web”選項,將“網頁”欄中的“當前主頁”以及“http//......”等所有各項前面的勾全部去掉(“http//…”為從Internet添加網頁或圖片的地址,一般不需要,可將它們全部刪除),并將下面“鎖定桌面項目”前面的勾也去掉,單擊確定完成設置,就又能看到可愛的桌面圖標了。4、另外有一種情況就是安裝了某種程序之后(比如系統提示:是否將該Active Desktop項添加到您的桌面上),桌面文字變的不透明。在“運行”中輸入“gpedit.msc”,打開組策略;在“用戶配置→管理模板→桌面→Active Desktop”中,點 啟用Active Desktop(活動桌面)然后點擊“屬性”選定“已禁用”,點禁用Active Desktop(活動桌面)“屬性”選定“已啟用”;之后打開控制面板,在經典視圖中打開系統,在“性能→高級選項→性能→視覺效果→使桌面文字透明”(等價于在之后執行第1種方法)內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • vue.js中使用echarts實現數據動態刷新功能
  • javascript多種頁面刷新方法小結
  • javascript刷新頁面的幾種方法總結
  • js關于刷新頁面的相關總結
  • 讓ie8和ie9支持ewebeditor在線編輯器的方法
  • kindeditor 編輯器 v3.5.1 修改版
  • fckeditor 表單提交時運行的代碼
  • asp下使用fckeditor在線編輯器的方法
  • 百度編輯器二次開發常用手記整理小結
  • xheditor 免費的國產html在線編輯器
  • fckeditor 防止上傳非法文件 增加登錄判斷
  • kindsoft在線網頁編輯器簡單的配置參數介紹
  • php中ckeditor和ckfinder配置問題小結
  • 配置fckeditor 實現圖片的上傳
  • 電腦一直自動刷新怎么辦啊
  • 為什么百度搜索時會自動刷新?
  • 為什么網頁老是不停的自動刷新。!
  • 為什么用百度搜索時總是自動刷新屏幕?
  • 網頁總是過一會就自動刷新是怎么回事
  • 為什么網頁自動刷新
  • 電腦桌面總是自動刷新怎么回事?
  • 電腦一直自動刷新怎么回事?
  • 手機的瀏覽器自動刷新怎么辦?
  • 什么手機瀏覽器可以設置自動刷新
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁網頁編輯器vue.js中使用echarts實現數據動態刷新功能javascript多種頁面刷新方法小結javascript刷新頁面的幾種方法總結js關于刷新頁面的相關總結讓ie8和ie9支持ewebeditor在線編輯器的方法kindeditor 編輯器 v3.5.1 修改版fckeditor 表單提交時運行的代碼asp下使用fckeditor在線編輯器的方法百度編輯器二次開發常用手記整理小結xheditor 免費的國產html在線編輯器fckeditor 防止上傳非法文件 增加登錄判斷kindsoft在線網頁編輯器簡單的配置參數介紹php中ckeditor和ckfinder配置問題小結配置fckeditor 實現圖片的上傳19款javascript富文本網頁編輯器免費開源百度編輯器(ueditor)使用ewebeditor 輯器按鈕失效 ie8下eckeditor/fckeditor 使用 ckedit徹底解決ewebeditor網站后臺不能解決fckeditor在ie10、ie11下的不javascript 在線文本編輯器實現代asp.net+fckeditor上傳圖片顯示叉修改fckeditor的文件上傳功能步驟頁面嵌入windows media player播22個國外的web在線編輯器收集asp.net+fckeditor上傳圖片顯示叉叉圖片無fckeditor syntaxhighlighter整合實現代碼fckediter javascript事件函數代碼tinymce syntaxhl插入代碼后換行的修改方fckeditor 網頁在線編輯器的使用方法針對php環境下fckeditor編輯器上傳圖片配asx文件 終極教程dedecms5.5 最新版ckeditor編輯器整合教程詳解react中的todo-list
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载