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似乎工作（fileinclude，重命名等等...已完成）但是browserSync没有。我没有收到任何错误消息，但浏览器不会自动重新加载。有什么想法吗？

谢谢！

Answer 1

以下技术对我有用。

自动重新加载

Html 您应该使用 browserSync.reload
和 CSS 使用 browserSync.stream（）。

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class CustomFileCheckAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value == null)
            return new ValidationResult("error message");

        IFormFile file = value as IFormFile;
        if (file == null)
            return new ValidationResult("error message");

        if (file.Length < MyCustomFileConstants.FileMinLength)
            return new ValidationResult("error message");

        if (file.Length > MyCustomFileConstants.FileMaxLength)
            return new ValidationResult("error message");

        if (file.ContentType != MyCustomFileConstants.FileAuthorizedContentType)
            return new ValidationResult("error message");

        file = null;
        return ValidationResult.Success;
    }
}

Answer 2

所以，我不能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
        }
    });

});

让我知道它是怎么回事。

browserSync无法正常工作

2 个答案: