Browser-sync не видит изменений в sass?
всё просто. ваш watch следит только за файлом assets/css/main.sass, поэтому и реагирует только на изменение этого файла.
с вашей структурой нужен такой watch:gulp.task('watch', function(){
  gulp.watch('assets/css/**/*.sass', ['styles']);
})
советую познакомиться с этим
Вот посмотрите мой таск:var sass: ['./src/sass/main.{scss,sass}'] //вынес как переменную
gulp.task('styles', function() {
    gulp.src(src.sass)
    .pipe(sass({
            "sourcemap=none": true,
            noCache: true,
            compass: true,
            style: sassStyle,
            lineNumbers: sassComments
        }))
    .pipe(autoPrefixer())   
    .pipe(gulp.dest(outputDir + 'css'))
    .pipe(connect.reload()) //в данном случае на browser-sync, но сути дела не меняет
});
обратите внимание на путь откуда вы берете файл main.sass
и вообще очень странно это выглядит: return sass('assets/css/main.sass') sass в css...
У вас в проекте в папке assets должны быть папки sass и css, в первой папке вы храните sass файлы, не скомпилированные, а в css уже готовый к подключению файл стилей.
Кроме того очень хорошая практика, даже сказал бы стандарт: в main.sass не писать никаких стилей, только импорты и точка.