gulp自動刷新插件

gulp自動刷新的插件不少，可是感受最好用的仍是 browser-sync 插件。若是不想用命令行，也可使用 browser-sync界面工具

先安裝 browser-sync 插件：

npm install browser-sync --save-dev

安裝 browser-sync 插件可能遇到的問題 http://www.cnblogs.com/ayseeing/p/4201202.html

 

browser-sync API 

 

gulpfile.js文件代碼以下：

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


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