node.js - 浏览器同步不工作

Question

我有这个代码可以通过任何更改重新加载浏览器:

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 似乎可以工作(文件包含、重命名等...已完成)，但 browserSync 却不能。我没有收到任何错误消息，但浏览器不会自动重新加载。有什么想法吗？

谢谢!

Answer 1

以下技术对我有用。

用于自动重新加载

• Html您应该使用browserSync.reload
• 对于CSS，请使用browserSync.stream()。

var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');

var browserSync = require('browser-sync').create(); // for live-editing

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

	// Serve files from the root of this project
	browserSync.init({
	    	server: "./"
	});
	
	gulp.watch('sass/**/*.scss', ['styles']);

	//-----*****   RELOADING of HTML   *****-----
	gulp.watch("*.html").on("change", browserSync.reload);
	
});


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

	gulp.src('sass/**/*.scss')
	
	.pipe(sass().on('error', sass.logError))     	
 
 	.pipe( gulp.dest('./css'))

	//-----*****   RELOADING of CSS   *****-----
	.pipe(browserSync.stream());	
});