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