瀏覽器自動刷新系列------browser-sync+gulp

      在網上看了好多關於browse-sync的使用介紹，基本都是把官網上的直接復制到博客上的，很少有實際的項目操作，當我把browser-sync+gulp在項目中使用的時候，因為要顧及到的文件較多，所以瀏覽器也很難實現時時刷新，還是有1-2s的運行時間的，廢話不多說，看正文：

安裝

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']);

運行

gulp

 上面的例子中只涉及到了靜態服務，但是項目中肯定是要把服務跑起來的，所以就要用到代理服務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會生成一個新的帶自動刷新的地址。