在建設(shè)響應(yīng)式網(wǎng)站時，我們需要以多種屏幕尺寸對其進(jìn)行測試，以確保在不同屏幕尺寸上正確呈現(xiàn)網(wǎng)站布局。我們可以在Chrome中使用屏幕尺寸和設(shè)備模擬器，非常方便。然而，沒有什么能比真實設(shè)備上的網(wǎng)站測試更好，因為它提供的環(huán)境與我們的用戶一樣接近。
但是，在多個設(shè)備上進(jìn)行測試也會帶來問題。假設(shè)我們有三個設(shè)備來測試網(wǎng)站，我們可能最終不得不每次我們剛剛做出改變時不斷刷新每個設(shè)備中的每個瀏覽器，正如您可以想象的那樣，這很麻煩。
已經(jīng)出現(xiàn)了同步測試的想法以解決這種情況并使工作流程更加簡化。有一個名為BrowserSync的Grunt插件可以執(zhí)行此操作，我們將在本文中向您展示如何在項目中部署它。
BrowserSync是開源的，并且是積極開發(fā)的。它是跨平臺的。您可以在Windows，OS X和Linux中使用它。另一方面，Ghostlab僅適用于OS X和Windows。BrowserSync是免費的，如果您幾乎沒有預(yù)算可以使用，這將有所幫助。
不用多說，讓我們看看BrowserSync的工作原理。
安裝
首先，我們將使用Grunt。我們需要確保grunt-cli和插件Grunt BrowserSync一樣安裝。此插件同步網(wǎng)站上發(fā)生的許多交互，包括頁面滾動，填充表單字段和單擊鏈接。
所有這些操作將在其他瀏覽器和設(shè)備中反映出來。鍵入以下命令以在工作目錄中安裝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在檢測到這些文件發(fā)生更改時自動刷新瀏覽器。我們還可以ghostMode同步網(wǎng)站上的互動，例如滾動和點擊。
一切都準(zhǔn)備好了。現(xiàn)在，我們運行g(shù)runt以啟動browserSync我們已在配置中設(shè)置的任務(wù)。
1 | grunt |
與舊版本不同，新的BrowserSync現(xiàn)在將設(shè)置使用的所有內(nèi)容，包括靜態(tài)服務(wù)器，并提供其所在的URL以重新加載我們的站點。
您可以從以下動畫GIF中看到，所有更新，更改和交互都會在瀏覽器中實時同步，因為更改了index.html和style.css。
