浏览器同步：脚本不会从父目录加载

Question

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

应用程序结构如下所示：

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

in 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 /，但是当我将“/src”添加到 chrome 中的 url 时，就像这样“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);
});

浏览器同步：脚本不会从父目录加载

browser-sync : scripts won't load from parent dir

gulp

browser-sync

npm-live-server