侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

使用gulp和browserSync实现页面自动刷新

2024-05-15 星期三 / 0 评论 / 0 点赞 / 86 阅读 / 1491 字

在平时开发时,我用过很多gulp的自动刷新工具,昨天试了下browser-sync这款插件,感觉确实不错,分享给大家。gulp和browser-sync的安装就不多介绍了,下面给出命令$ cnpm i

在平时开发时,我用过很多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 startgulp.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

广告 广告

评论区