gulp - 浏览器同步: scripts won't load from parent dir

Question

我正在尝试使浏览器同步以在我的项目中工作，而不是使用实时服务器

该应用程序的结构如下所示:

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

在index.html中，脚本是从 node_modules 目录加载的

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

当我使用实时服务器时，它会加载脚本并可以正常工作，但是由于我移至浏览器同步，因此脚本不会加载。这是gulpfile.js中的代码:

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

当我将src路径作为基本目录baseDir: "./src"时
该网站可以正常运行，但脚本无法加载



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

该网站给我无法GET/，但是当我在chrome中将“/src”添加到url中时，就像“http://localhost:3000/src”一样，它可以工作。

所以这里的问题是，浏览器同步不会从其 baseDir 的父文件夹中加载脚本。

我需要一种配置浏览器同步以从其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);
});