如何使用BrowseSync修复“无法获取/”错误？

Question

我正在使用Gulp设置，它将监视我的HTML，Sass和文件。如何解决以下错误？

  

无法获取/

这是我的代码：

//Watch Files
htmlWatchFiles = './src/html/main/*.html';

//Input files
//  File for gulp-sass compiler
var inputScssFile = './src/stylesheets/**/*.scss'

function sassCompiler() {
    return gulp.src(inputScssFile)
      .pipe(sass())
      .pipe(autoPrefixer())
      .pipe(dest('./src/stylesheets/output'))
      .pipe(browserSync.stream());
}

这是我要观看的功能：

function toBrowseSync(){
    browserSync.init({
        server: {
            baseDir: "src/",
            index:"./src/html/main/index/html"
        }
    });
    gulp.watch(inputScssFile,sassCompiler);
    gulp.watch(htmlWatchFiles).on('change', browserSync.reload);
}

exports.default = series(sassCompiler,toBrowseSync);

Answer 1

对于BrowserSync配置，在index属性中使用的路径应相对于所使用的baseDir。 here文档还在代码注释中提到了这一点。

browserSync.init({
    server: {
        baseDir: "src/",
        index:"html/main/index.html"
    }
});