html - 浏览器同步未使用 gulp 连接项目中的 url 链接

Question

我有一个项目，我正在为其制定工作流程，我的项目使用 gulp 来观察浏览器更改和 sass 更改。吞咽文件是：

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

// Compile sass to css

gulp.task('sass', function () {
    return gulp.src('./src/sass/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/css/'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './src/static'
        }
    });
    gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
    gulp.watch('./src/static/*.html').on('change', browserSync.reload);
});

问题是由于某种原因我的资产丢失了，当我尝试链接到它们时它们没有显示，错误如下：

我的结构是：

标签： htmlgulpgulp-browser-sync

Answer 1

我通过执行以下操作解决了这个问题：

 browserSync.init({
        startPath:'./src/static',
        server:{
            baseDir: './'
        }
    });