使用gulp和browserSync实现页面自动刷新
博客专区 > 阿振 的博客 > 博客详情
使用gulp和browserSync实现页面自动刷新
阿振 发表于1年前
使用gulp和browserSync实现页面自动刷新
  • 发表于 1年前
  • 阅读 115
  • 收藏 0
  • 点赞 0
  • 评论 1

腾讯云 十分钟定制你的第一个小程序>>>   

在平时开发时,我用过很多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
标签: gulp browser-sync
共有 人打赏支持
粉丝 11
博文 54
码字总数 58528
评论 (1)
zxl78585
毕竟,把人家惹哭了我还不知道该怎么去哄
×
阿振
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: