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

最新推荐文章于 2024-04-26 10:01:57 发布

powerx_yc

最新推荐文章于 2024-04-26 10:01:57 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/2399867/blog/700669

博主在开发中用过很多gulp自动刷新工具，昨日试用browser-sync插件后感觉不错并分享。文中未详细介绍gulp和browser-sync的安装，仅表示会给出命令，还给出了转载来源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2399867/blog/700669