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

时间:2015-11-13 12:20:44

标签: gulp browser-sync npm-liveserver

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

app结构如下所示:

null
index.html 中的

脚本是从 node_modules dir

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

当我使用 live-server 时,它会加载脚本并且工作正常,但是由于我转移到浏览器同步,脚本不会加载。这是 gulpfile.js 中的代码:

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

当我将src路径作为基础目录gulp.task('serve', function() { browserSync.init({ server: { baseDir: "./src" } }); gulp.watch(sassfiles, ['sass']); gulp.watch(htmlfiles).on('change', browserSync.reload); }); 时 该网站有效,但脚本无法加载

enter image description here

但是当我将其更改为baseDir: "./src"

该网站为我提供了无法获取/ ,但是当我将“/ src”添加到Chrome中的网址时,就像“http://localhost:3000/src”一样,它可以正常工作。

所以问题在于 browser-sync 不会从 baseDir 的父文件夹加载脚本。

我需要一种方法来配置 browser-sync 从其baseDir: "./"启动,但从子文件夹加载主页 index.html

这可以通过浏览器同步吗?

1 个答案:

答案 0 :(得分:14)

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