BrowserSync-多瀏覽器測試工具

閱讀目錄

• 自動刷新
• 介紹BrowserSync
• BrowserSync具體使用
• BrowserSync配合gulp

 

自動刷新

     自動刷新，顧名思義，就是不用咱們去F5刷新。假設有一天咱們寫代碼，只須要ctrl + s，在瀏覽器上立刻就能看到頁面效果，這無非就是自動刷新的範例。而BrowserSync幫助咱們作到這件事兒。固然我這兒只是簡單地記錄下它的應用。

 

介紹BrowserSync

BrowserSync的通常用法則不須要瀏覽器插件，也不用手工添加代碼（儘管也提供那樣的用法）。一句控制檯的命令以後，不管是在手機裏仍是電腦，不管用多少個瀏覽器（經測試，IE8+及其它），均可以擁有自動刷新的功能。詳細請見官網

BrowserSync具體使用

要安裝它，必然先有Node，這個就很少說。

npm install -g browser-sync

若是您只但願在對某個css文件進行修改後會同步到瀏覽器裏。那麼您只須要運行命令行工具，進入到該項目（目錄）下，並運行相應的命令：

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

以下：

你這樣啓動以後，你能夠用谷歌瀏覽器、火狐瀏覽器、手機、ipad等同時訪問 http://10.58.184.219:3000

而當我改變css時，各個瀏覽器上會相應的變化：

如果還想監聽別的，例如html、或者整個項目，能夠直接寫成：

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

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

　　　　

BrowserSync配合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（固然前提，先得去npm install gulp和browser-sync）

這兒的效果跟單獨用browser-sync是同樣的。

這篇文章所用的demo其實就是從官網上下載下來的實例：源代碼