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 : "./"但从子文件夹加载主页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);
});