Browsersync的安裝及使用方法

Browsersync介紹

Browsersync是瀏覽器同步測試工具，Browsersync能讓瀏覽器實時、快速響應文件更改（html、js、css、sass、less等）並自動刷新頁面。省去手動F5的事件，更重要的是 Browsersync能夠同時在PC、平板、手機等設備下進項調試。即在任何一設備上操做，其餘設備也隨之改變，大大提升了測試效率。效果圖：

自動刷新

各瀏覽器同步測試

Browsersync安裝

Browsersync是基於node.js的，因此首先肯定安裝了node.js。

1）Global Install（全局安裝）

若是你想在任何目錄的命令行中運行Browsersync ，可經過global命令進行全局安裝。

npm install -g browser-sync　

2) Local Install （本地安裝）

推薦這種方式來安裝 Browsersync - 經過本地安裝到每一個項目。這種方式的可使依賴被添加到你的package.json文件裏（gulp或grunt構建方式）

npm install browser-sync --save-dev

啓動 BrowserSync

若是你只須要將css文件修改後同步到瀏覽器裏，只須要在命令行裏輸入便可

靜態網站

// --files 路徑是相對於運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css"

監聽多個類型的文件，須要用逗號隔開。例如咱們再加入一個.html文件

// --files 路徑是相對於運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css, *.html"
// 若是你的文件層級比較深，您能夠考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

運行命令後，Browsersync將建立一個本地服務器並自動打開你的瀏覽器後訪問http://localhost:3000地址，這一切都會在命令行工具裏顯示。

動態網站

若是你已經有其餘本地服務器環境PHP或相似的，須要使用代理模式。 BrowserSync將經過代理URL(localhost:3000)來查看。

// 主機名能夠是ip或域名
browser-sync start --proxy "主機名" "css/*.css"

好比個人項目服務是用tomcat跑起來的，訪問地址是"localhost:8081",使用如下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問localhost:8081，並監聽其css目錄下的全部css文件。

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

Browsersync+gulp

安裝

npm install -g --save-dev gulp browser-sync

gulpflie.js代碼

靜態服務

//加載gulp模塊
var gulp = require('gulp');
//加載browser-sync模塊
var browserSync = require('browser-sync').creat();
var reload = browserSync.reload;
//加載sass模塊
var sass = require('gulp-sass');
//加載pug模塊
var pug = require('gulp-pug');
//加載gulp-autoprefixer模塊
var autoprefixer = require('gulp-autoprefixer');


/**
 * 這裏靜態服務器 + 監聽 scss/pug/js 文件
 */
gulp.task('server',['sass','pug'],function(){
    browserSync.init({
        server:'./', //這裏指的是根目錄，若是你的index.html在根目錄下，會直接打開index頁面，否則會顯示Get Not，本身寫路徑就行
        port:8081  //默認打開localhost:3000,如今改爲localhost:8081
    });
    
    //監聽 scss/pug/js 文件
    gulp.watch('sass/**/*.scss',['sass']);
    gulp.watch('jade/**/*.pug',['pug']);
    gulp.watch('page/**/*.js').on('change',reload);
});

/**
 * 編譯sass
 */
gulp.task('sass',function(){
    return gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', plugins.sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9',       'opera 12.1', 'ios 6', 'android 4')) //這個插件是用來加瀏覽器前綴的
        .pipe(gulp.dest('./page'))
        .pipe(reload({stream:true}));
});

/**
 * 編譯pug
 */
gulp.task('pug',function(){
    return gulp.src('jade/**/*.pug')
        .pipe(pug({pretty:true}))
        .pipe(gulp.dest('./page'))
        .pipe(reload({stream:true}));
});
/**
 * 默認運行
 */
gulp.task('default',['server']); 

動態服務

上面的例子中只涉及到了靜態服務，可是項目中確定是要把服務跑起來的，因此就要用到代理服務proxy

/**
 * 代理服務器 + 監聽 scss/pug/js 文件
 */
gulp.task('server',['sass','pug'],function(){
    browserSync.init({
        proxy:'http://localhost:8081/court-digital-library-search/page/portal/portalHomepage.html',
        port:8083
    });
    gulp.watch('sass/**/*.scss',['sass']);
    gulp.watch('jade/**/*.pug',['pug']);
    gulp.watch(['page/**/*.js','lar-ui/**/*.js']).on('change',reload);
}); 

咱們項目使用tomcat跑起來的，本來tomcat的訪問地址是哪裏，proxy指向哪裏，browser-sync會生成一個新的帶自動刷新的地址。 

運行

gulp