質問: browser-syncを使いたいのですが、Cannot GET /と出てしまいます。 下記のようにブラウザに打つとページが表記されますがbrowser-sync start --server --files "**/*"実行時には、 上記のエラーページが出てしまいます。 ・dest-afterフォルダの中にindex.htmlファイルがあります。 gulp.jsが入っているフォルダ=GULPフォルダ ├─dest-after │ ├─css │ │ ├─foundation │ │ ├─layout │ │ └─object │ │ ├─component │ │ ├─project │ │ └─utility │ ├─html │ ├─img │ │ ├─common-img │ │ └─index │ ├─js │ ├─plugin │ └─web-font ・gulp.js ``` // ローカルサーバーを立て、 // ファイル更新時に自動リロードするタスクです gulp.task("default", function () { // 初期設定です browserSync.init({ server: { baseDir: "./src-before/" } }); // srcフォルダ以下のファイルが更新されたらリロードします gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], function () { browserSync.reload(); }); }); ``` ・下記のようにはなっています。それでもリロードしません。 [BS] Serving files from: ./ [BS] Watching files... [BS] File changed: src-before\layout\_footer.css ・baseDir: "./src-before/"のパスが間違っているのでしょうか? gulpのパスとは、いつもgulp.jsをルートディレクトリとして相対パスを書けばよいのですよね。 そうならあっているとは思うのですが。 そして今回はトランスパイル後の、index.htmlがあるディレクトリの相対パスを書けば、ポートの設定などいらずにできるはずなのですよね。
回答: 初めまして。 baseDirには表示するパスを書くのでdest-afterですよ。 多分こんな感じで動くかと.. ``` var gulp = require('gulp'); var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task("bs", function () { browserSync({ server: { baseDir: "../dest-after/" } }); }); gulp.task('watch', function(){ gulp.watch('src-before/**', reload); }); gulp.task('default', ['bs'], function(){ gulp.start(['watch']); }); ```