Node.js browserSync不工作

Node.js browserSync不工作,node.js,gulp,browser-sync,Node.js,Gulp,Browser Sync,我有以下代码,可以在进行任何更改时重新加载浏览器: var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); 我在这里通过html.js触发b

我有以下代码,可以在进行任何更改时重新加载浏览器:

var gulp          = require('gulp');
var browserSync   = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });

});
我在这里通过html.js触发browserSync:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var fileinclude = require('gulp-file-include');
var rename      = require('gulp-rename');
var util        = require('gulp-util');

gulp.task('html', function() {

    var filename = 'middle.html';

    return gulp.src(filename)
        .pipe(fileinclude())
        .pipe(rename('index.html'))
        .pipe(gulp.dest('./'))
        .pipe(browserSync.reload({stream:true}));
});
出于某种原因,html.js似乎可以工作(fileinclude、rename等都完成了),但browserSync没有。我没有收到任何错误消息,但浏览器不会自动重新加载。有什么想法吗


谢谢

所以,我不是100%确定这是否是问题所在,但试试这个。将浏览器同步任务添加到监视任务,以加载配置

var gulp = require('gulp');
gulp.task('watch', ['browser-sync'], function() { // Add your browser-sync task to the watch task
    gulp.watch([ 'html/*' ], ['html']);
    gulp.watch([ '.html' ], ['html']);
    gulp.watch([ 'js/' ], ['html']);
    gulp.watch([ 'css/*' ], ['html']);
    gulp.watch([ 'css/*', ], ['sass']);
});
然后修改浏览器同步配置,将css更改插入浏览器:

var gulp          = require('gulp');
var browserSync   = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./",
            injectChanges: true // this is new
        }
    });

});

让我知道进展如何。

下面的技术对我很有用

用于自动重新加载

  • Html您应该使用browserSync.reload
  • 对于CSS使用browserSync.stream()
var gulp=require('gulp');
var sass=需要('gulp-sass');
var watch=需要(“大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口”;
var browserSync=require('browser-sync')。create();//用于实时编辑
gulp.task('default',function(){
//从该项目的根目录提供文件
browserSync.init({
服务器:“./”
});
狼吞虎咽的手表('sass/***.scss',['style']);
//-----*****重新加载HTML*****-----
gralp.watch(“*.html”).on(“change”,browserSync.reload);
});
gulp.task('style',function()){
gulp.src('sass/***/.scss')
.pipe(sass().on('error',sass.logError))
.管道(大口目的地('./css'))
//-----*****重新加载CSS*****-----
.pipe(browserSync.stream());

});
你的html中有Browsersync Javascript吗?没有,我在tasks文件夹中的单独文件(Browsersync.js)中有它,与html.js相同如果你在浏览器中加载页面,你能找到Browsersync Javascript标记吗?它应该是这样的:
document.write(“.replace(/HOST/g,location.hostname)。replace(/PORT/g,location.PORT))不,不是那样的。是不是应该添加到HTML中?感谢信应该由browsersync自动放在那里。您是否也使用browserSync作为服务器?仍然没有,但非常感谢您的帮助!如果你发现了,请告诉我们,我很好奇。