javascript - 怎么使用browser-sync实现代理?-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 怎么使用browser-sync实现代理?

大家讲道理 2017-04-11 13:09:56

[JavaScript讨论组]

391

比如我现在本机有个.net服务器 localhost：9000，如何使用browser-sync实现监听服务器下的文件变化实时刷新页面？
求详细点，谢谢！

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(3)

大家讲道理2017-04-11 13:11:56 3楼

browser-sync 是只能 watch 本地硬盘上的文件的变动吧，watch不了服务端的页面的变动。

你可以 watch 你.net下的代码文件夹，然后重载就可以实时刷新页面了

http://www.browsersync.cn/doc...

// 创建一个Browsersync实例 
var bs = require("browser-sync").create();

// 监听HTML更改事件并重新加载
bs.watch("/.net/path/*.html").on("change", bs.reload);

// 提供一个回调来捕获所有事件的CSS 
// files - 然后筛选的'change'和重载所有
// css文件在页面上
bs.watch("/.net/path/css/*.css", function (event, file) {
    if (event === "change") {
        bs.reload("*.css");
    }
});

赞 +0

添加回复

天蓬老师2017-04-11 13:11:56 2楼

想问下阁下解决了该问题了没有，我现在也是想实现你说的那样，本机有个nginx服务器，配了本地host,想用browser实现热更新，试了好多办法都不行。

赞 +0

添加回复

迷茫2017-04-11 13:11:56 1楼

很久没用browser-SYNC了。。翻了下以前的笔记- -

1、建个本地服务器：比如使用python -m http.server 8080(对应IP4协议地址)

2、使用代理:browser-sync start --proxy "localhost:8080(或192.168.1.xxx:8080)" --files "css/*.css"

3、假如我此时browser-sync中设置的端口为localhost:3000,打开localhost:3000发现localhost:8080的内容已经可以在其中实时刷新了(注意使用时不要开启其他可能导致端口占用的代理工具和VPN等)。

如果不想用命令行- -配置可以这样(刚翻出来测试了下)：
目录结构：

app
 -css
  --main.css
 -js
 -scss
  --main.scss
 -index.html
node_module
gulpfile.js
package.json

HTML

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <p class="demo">111</p>
</body>

gulpfile.js

var gulp = require('gulp'),
    //按需加载package.json中的所有依赖包
    $ = require('gulp-load-plugins')({
        pattern: '*',
    });
  //代理已有服务器
gulp.task('browserSync', ['sass'], function() {
    $.browserSync.init({
        proxy: "192.168.1.103:8080"
    });
});
// scss文件变化监听，并热更新浏览器
gulp.task('serve', ['sass', 'browserSync'], function() {

    gulp.watch('app/scss/**/*.scss', ['sass']); // 只编译改动的SCSS文件

});  
gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss')
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.sourcemaps.write('./maps'))
        .pipe($.plumber.stop())
        .pipe(gulp.dest('app/css'))
        .pipe($.browserSync.reload({
            stream: true
        }));
});

运行

python -m http.server 8080 //随便开启个本地服务器

gulp serve //运行browser-sync代理(默认端口http://localhost:3000)

打开页面http://localhost:3000/app/即可

看下两个命令行- -8080本地服务器和proxy代理都成功

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>