Браузер-синхронизация: скрипты не будут загружаться из родительского каталога

Question

Я пытаюсь заставить браузер синхронизироваться в моем проекте вместо использования live-сервера.

Структура приложения выглядит следующим образом:

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-сервер, он загружает сценарии и работает нормально, но, поскольку я перешел на синхронизацию с браузером, сценарии не загружаются. вот код в 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" к URL-адресу в chrome, например " http://localhost:3000/src", это работает.

поэтому проблема в том, что браузерная синхронизация не будет загружать скрипты из родительской папки его baseDir.

Мне нужен способ настроить синхронизацию браузера для запуска с его baseDir : "./" но загрузите главную страницу index.html из подпапки.

это возможно с синхронизацией браузера?

Answer 1

Из документации по синхронизации браузера

baseDir может принимать несколько путей. Я добавил папку src, где существует index.html.

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