gulp での browser-sync の設定について

Question

browser-sync の設定がうまくできないのでご教示ください。

下記のディレクトリ構成に browser-sync でローカルサーバを立ち上げたいのですが、index.hmtl は見れるのでが、item_list.html を見ると Cannot GET /item_list.html と表示されてしまいます。

browser-sync のオプションだと思うのですが、記述方法がわかりません。

○ディレクトリ構成
root
├─app
│ ├─index.html
│ └─item_list.html
├─html
│ ├─css
│ ├─img
│ └─js
gulpfile.coffee

○gulpfile.coffee

gulp.task 'serve', ->
  browserSync.init {
    notify: false
    server:
      baseDir: './'
      index: 'app/index.html'
  }

  gulp.watch('./app/*.html').on 'change', browserSync.reload
  gulp.watch('./html/css/*.css').on 'change', browserSync.reload

gulp.task 'default', ['serve']

Answer 1

一日置いたら自己解決しました。

Browsersync options

公式サイトに Multiple base directories という項目がありました。

gulp.task 'serve', ->
  browserSync.init {
    notify: false
    server: ['./', './app/']
  }

  gulp.watch('./app/*.html').on 'change', browserSync.reload
  gulp.watch('./html/css/*.css').on 'change', browserSync.reload

gulp.task 'default', ['serve']