在建設(shè)響應(yīng)式網(wǎng)站時(shí)，我們需要以多種屏幕尺寸對(duì)其進(jìn)行測(cè)試，以確保在不同屏幕尺寸上正確呈現(xiàn)網(wǎng)站布局。我們可以在Chrome中使用屏幕尺寸和設(shè)備模擬器，非常方便。然而，沒(méi)有什么能比真實(shí)設(shè)備上的網(wǎng)站測(cè)試更好，因?yàn)樗峁┑沫h(huán)境與我們的用戶一樣接近。
但是，在多個(gè)設(shè)備上進(jìn)行測(cè)試也會(huì)帶來(lái)問(wèn)題。假設(shè)我們有三個(gè)設(shè)備來(lái)測(cè)試網(wǎng)站，我們可能最終不得不每次我們剛剛做出改變時(shí)不斷刷新每個(gè)設(shè)備中的每個(gè)瀏覽器，正如您可以想象的那樣，這很麻煩。
已經(jīng)出現(xiàn)了同步測(cè)試的想法以解決這種情況并使工作流程更加簡(jiǎn)化。有一個(gè)名為BrowserSync的Grunt插件可以執(zhí)行此操作，我們將在本文中向您展示如何在項(xiàng)目中部署它。
BrowserSync是開(kāi)源的，并且是積極開(kāi)發(fā)的。它是跨平臺(tái)的。您可以在Windows，OS X和Linux中使用它。另一方面，Ghostlab僅適用于OS X和Windows。BrowserSync是免費(fèi)的，如果您幾乎沒(méi)有預(yù)算可以使用，這將有所幫助。
不用多說(shuō)，讓我們看看BrowserSync的工作原理。
安裝
首先，我們將使用Grunt。我們需要確保grunt-cli和插件Grunt BrowserSync一樣安裝。此插件同步網(wǎng)站上發(fā)生的許多交互，包括頁(yè)面滾動(dòng)，填充表單字段和單擊鏈接。
所有這些操作將在其他瀏覽器和設(shè)備中反映出來(lái)。鍵入以下命令以在工作目錄中安裝BrowserSync：
1 2 | npm install grunt --save-devnpm install grunt-browser-sync --save-dev |
組態(tài)
安裝完成后，以這種方式在Gruntfile.js中加載BrowserSync?。
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | module.exports = function (grunt) {????grunt.initConfig({????????browserSync: {????????????bsFiles: {????????????????src : [ 'index.html', './css/*.css' ]????????????},????????????ghostMode: {????????????????clicks: true,????????????????forms: true,????????????????scroll: true????????????},????????????options: {????????????????server: {????????????????????baseDir: "./"????????????????}????????????}????????}????});? ????// load npm tasks????grunt.loadNpmTasks( 'grunt-browser-sync' );? ????// define default task????grunt.registerTask( 'default', ['browserSync'] );} |
此配置將監(jiān)視style.css以及index.html在檢測(cè)到這些文件發(fā)生更改時(shí)自動(dòng)刷新瀏覽器。我們還可以ghostMode同步網(wǎng)站上的互動(dòng)，例如滾動(dòng)和點(diǎn)擊。
一切都準(zhǔn)備好了?，F(xiàn)在，我們運(yùn)行g(shù)runt以啟動(dòng)browserSync我們已在配置中設(shè)置的任務(wù)。
1 | grunt |
與舊版本不同，新的BrowserSync現(xiàn)在將設(shè)置使用的所有內(nèi)容，包括靜態(tài)服務(wù)器，并提供其所在的URL以重新加載我們的站點(diǎn)。
您可以從以下動(dòng)畫(huà)GIF中看到，所有更新，更改和交互都會(huì)在瀏覽器中實(shí)時(shí)同步，因?yàn)楦牧薸ndex.html和style.css。
