browser-syncを使いたいのですが、Cannot GET /と出てしまいます。

Question

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があるディレクトリの相対パスを書けば、ポートの設定などいらずにできるはずなのですよね。

Answer 1

初めまして。
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']);
  });

Comments

[退会済みユーザー]

こんにちは
ありがとうございます。

下記の部分はトランスパイル前ではなく、トランスパイル後のフォルダを指定するのですね。
gulp.task("bs", function () {
browserSync({
server: {
baseDir: "../dest-after/"
}
});
});

[退会済みユーザー]

ありがとうございました。

dest-afterをカレントディレクトリにしてから
browser-sync start --server --files *と打ったところうまくいったようです。

ただsrcにあるcssはこれだとwatchできませんよね。
browser-sync start --server --files *と打てばカレントの中にあるフォルダの中にあるファイルすべてを監視してくれるでしょうか？

[minehan]

はい。ワイルドカードでもいけますし、

browser-sync start --server --files "*.html, *.css, *.js"

みたいにカンマで区切れば複数指定もできます

[退会済みユーザー]

・baseDir: "../dest-after/"
dest-afterをカレントディレクトリにして、その下にある
browser-sync start --server --files "*.html, *.css, *.js" の"*.html, *.css, *.js" ファイルをwatchするということでしょうか？

それともgulpfile.jsがある場所が、baseDir: "../dest-after/"ですよとプログラムに伝えるための記述でしょうか？
おそらく前者でしょうが念のため確認させてください。

[退会済みユーザー]

また、
dest-afterをカレントディレクトリにして、その下にある
browser-sync start --server --files "*.html, *.css, *.js" の"*.html, *.css, *.js" ファイルをwatchするということだった場合下記の記載と被る気がするのですが、
下記の記載はもしかして不要なのでしょうか？

//以下gulp-watch
gulp.task('watch', function(){
gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css'], function () {
browserSync.reload();
});//監視したいファイルの相対パス
});

最後にdest-afterにあるhtml,jsファイルはいいのですがcssファイルはsrcにあるので、
当然ながら反応しません。
おそらく下記でいいのかなと思うのでやってみます。
browser-sync start --server --files "*.html, ../src-before/*.css/*.css, *.js"

[退会済みユーザー]

htmlだけ動きますが、css、jsが動きません。

C:\Users\h\Desktop\images\gulp-folder\website\和風\dest-after>browser-sync start --server --files "*.html, ../src-before/*.css/*.css, *.js"

と打っています