title: BrowserSync Not Loading
body: <p>Very new to BrowserSync. I'm trying to find out how to get it going haha.</p>
  
  <p>My main file that stores everything is called 'gulpwork'. </p>
  
  <p>Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').</p>
  
  <p>I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.</p>
  
  <p>I would like to have both Pug and SASS synced.</p>
  
  <p>EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?</p>
  
  <p>Here is my gulpfile.js code:</p>
  
  <p>JS:</p>
  
  <pre><code>var gulp = require('gulp');
  var pug = require('gulp-pug');
  var sass = require('gulp-sass');
  var browserSync = require('browser-sync').create();
  
  gulp.task('browserSync', ['sass', 'pug'], function() {
  browserSync.init({
      server: {
          baseDir: './'
      }
  })
  });
  
  gulp.task('pug', function() {
  gulp.src('./src/*.pug')
  .pipe(pug({
      pretty: true
  }))
  .pipe(gulp.dest('./dist'))   
  });
  
  gulp.task('sass', function() {
  return gulp.src('./sass/*.sass')
  .pipe(sass())
  .pipe(gulp.dest('./css'))
  .pipe(browserSync.reload({stream: true}))
  });
  
  
  gulp.task('watch', ['browserSync'], function() {
  
  gulp.watch('./src/*.pug', ['pug']);
  gulp.watch('./sass/*.sass', ['sass']);
  gulp.watch('./dist/*.html').on('change', browserSync.reload);
  });
  
  gulp.task('default', ['sass', 'pug', 'watch']);
  </code></pre>