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

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>

当我使用live-server时，它会加载脚本并且工作正常，但是由于我移至浏览器同步，因此不会加载脚本。这是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: "./"

该网站给了我Cannot GET / ，但是当我像这样“ http://localhost:3000/src ”将“/src”添加到chrome中的url时，它可以工作。

所以这里的问题是browser-sync不会从其baseDir的父文件夹加载脚本。

我需要一种方法来配置浏览器同步以从其启动但从子文件夹baseDir : "./"加载主页index.html 。

这可能与浏览器同步吗？

Answer 1

来自浏览器同步文档

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);
});