browser-sync：脚本不会从父目录加载

Question

我正在尝试让 browser-sync 在我的项目中工作，而不是使用 live-server

app结构如下所示：

null

index.html 中的

脚本是从 node_modules dir

加载的

personal-app
├── node_modules
└── src
    ├── app
    │   └── app.ts
    └── index.html  

当我使用 live-server 时，它会加载脚本并且工作正常，但是由于我转移到浏览器同步，脚本不会加载。这是 gulpfile.js 中的代码：

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

当我将src路径作为基础目录gulp.task('serve', function() { browserSync.init({ server: { baseDir: "./src" } }); gulp.watch(sassfiles, ['sass']); gulp.watch(htmlfiles).on('change', browserSync.reload); }); 时 该网站有效，但脚本无法加载

但是当我将其更改为baseDir: "./src"

时

该网站为我提供了无法获取/ ，但是当我将“/ src”添加到Chrome中的网址时，就像“http://localhost:3000/src”一样，它可以正常工作。

所以问题在于 browser-sync 不会从 baseDir 的父文件夹加载脚本。

我需要一种方法来配置 browser-sync 从其baseDir: "./"启动，但从子文件夹加载主页 index.html 。

这可以通过浏览器同步吗？

Answer 1

来自browser-sync documentation

baseDir 可以采用多条路径。我添加了index.html存在的src文件夹。

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: ["./", "./src"]   //added multiple directories 
        }
    });
    gulp.watch(sassfiles, ['sass']);
    gulp.watch(htmlfiles).on('change', browserSync.reload);
});