使用gulp和browserSync實現頁面自動刷新

在平時開發時，我用過不少gulp的自動刷新工具，昨天試了下browser-sync這款插件，感受確實不錯，分享給你們。

gulp和browser-sync的安裝就很少介紹了，下面給出命令

$ cnpm install --save-dev gulp browser-sync

將下面的文件寫入gulpfile.js文件

'use strict';

// 先引入依賴模塊
var gulp = require("gulp"),
    browserSync = require("browser-sync");


// 自動刷新 browser-sync start
gulp.task('browser',function(){
  browserSync({
    // host: 172.16.157.1,
    port: 3000,
    open: true,
    // 路徑顯示/src開始
    startPath: "/src",
    //timestamps:false,
    server: {
      directory: true,
      routes: {
        '/src': "./src/index.html"
      },
      middleware: function(req,res,next){
        console.log("中間件");
        next();
      },
      baseDir: './'
    },
    // 指定瀏覽器
    // browser: "google chrome" // 或  ["google chrome","firefox"]
    // 延遲刷新，默認0
    reloadDelay: 1,
    // 是否載入css修改，默認true
    injectChanges: false
  });
});
gulp.task('bro',function(){
  gulp.src('./src/**')
  .pipe(browserSync.reload({stream:true}));
});
gulp.task('default',['bro','browser'],function(){
  gulp.watch('./src/**',['bro']);
});
// 自動刷新 browser-sync end