6

live-serverを使用する代わりに、自分のプロジェクトでbrowser-syncを機能させようとしています

アプリの構造は次のようになります。

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を使用すると、スクリプトが読み込まれて正常に動作しますが、browser-sync に移行したため、スクリプトが読み込まれません。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 /と表示されますが、「 http://localhost:3000/src 」のように「/ src」をクロムのURLに追加すると機能します。

ここでの問題は、browser-syncがbaseDirの親フォルダーからスクリプトをロードしないことです。

browser-syncから起動するように構成する方法が必要ですが、サブフォルダーからbaseDir : "./"メインページのindex.htmlをロードします。

これは browser-sync で可能ですか?

4

1 に答える 1

17

ブラウザ同期のドキュメントから

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);
});
于 2015-11-13T12:33:22.620 に答える