gulp browsersync 404 error?

Question

JavaScript

Hello. I don’t understand why a 404 error appears, how to understand why it is?
running gulp watch or gulp browser-sync. Everything compiles fine in the console.
gulp -v 3.9.1
node -v 6.10.0
npm -v 4.4.1
did npm ls browser-sync, then cleared the browser cache, didn't help

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglifyjs'),
  cssnano = require('gulp-cssnano'),
  rename = require('gulp-rename'),
  del = require('del'),
  imagemin = require('gulp-imagemin'),
  pngquant = require('imagemin-pngquant'),
  cache = require('gulp-cache'),
  autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function(){
  return gulp.src('app/sass/*.sass')
  .pipe(sass())
  .pipe(autoprefixer(['last 7 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true}))
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('scripts', function(){
  return gulp.src([
    'app/libs/jquery/dist/jquery.min.js',
    'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js',
    'app/libs/bootstrap-3.3.7-dist/js/bootstrap.min.js'
  ])
  .pipe(concat('libs.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('app/js'));
});

gulp.task('css-libs', ['sass'], function(){
  return gulp.src('app/css/libs.css')
  .pipe(cssnano())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('app/css'));
});

gulp.task('browser-sync', function(){
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  });
});

gulp.task('clean', function(){
  return del.sync('dist');
});

gulp.task('clear', function(){
  return cache.clearAll();
});

gulp.task('img', function(){
  return gulp.src('app/img/**/*')
  .pipe(cache(imagemin({
    interlaced: true,
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
    use: [pngquant()]
  })))
  .pipe(gulp.dest('dist/img'));
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function(){  
  gulp.watch('app/sass/*.sass', ['sass']);
  gulp.watch('app/views/*.html', browserSync.reload);
  gulp.watch('app/js/*.js', browserSync.reload);
});

gulp.task('build',['clean', 'img', 'sass', 'scripts'], function(){
  var buildCss = gulp.src([
    'app/css/main.css',
    'app/css/libs.min.css',
  ])
    .pipe(gulp.dest('dist/css'));

  var buildFonts = gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'));

  var buildJs = gulp.src('app/js/**/*')
    .pipe(gulp.dest('dist/js'));

  var buildHtml = gulp.src('app/views/**/*')
    .pipe(gulp.dest('dist/views'));

});

Answer 1

Your html was compiled into the views folder, but you had to compile them into the dest folder, browsersync did not find the index file and threw out a 404 error. Update from repository ;)

Answer 2

idangero.us/swiper/demos/170-slides-per-column.html
idangero.us