码迷,mamicode.com
首页 > 其他好文 > 详细

gulp自动刷新插件

时间:2015-02-26 18:14:03      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

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

  

gulp自动刷新插件

标签:

原文地址:http://www.cnblogs.com/ayseeing/p/4301721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!