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

Question

我正在尝试让浏览器同步在我的项目中工作而不是使用live-server

应用程序结构如下所示：

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

在index.html中 ，脚本从node_modules dir加载

<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: "./"

该网站给了我不能GET / ，但是当我将“/ src”添加到chrome中的url时，如“ http：// localhost：3000 / src ”，它可以工作。

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

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