const gulp = require('gulp'),
      sourcemaps = require('gulp-sourcemaps'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      pug = require('gulp-pug'),
      plumber = require('gulp-plumber'),
      server = require('browser-sync');

const config = {
  src: 'src',
  build: 'build'
};


gulp.task('sass', () => {
  return gulp.src([
    `${config.src}/scss/**/*.scss`,
    `${config.src}/templates/**/*.scss`])
  .pipe(plumber())
  .pipe(sass())
  .pipe(sourcemaps.init())
  .pipe(autoprefixer({ browsers: ['> 1%'], cascade: false }))
  .pipe(gulp.dest(`${config.build}/css`))
  .pipe(server.stream())
});


gulp.task('pug', function buildHTML() {
  return gulp.src(`${config.src}/templates/pages/*.pug`)
  .pipe(plumber())
  .pipe(pug({
    pretty: true
  }))
  .pipe(gulp.dest(config.build))
});


gulp.task('pug-watch', ['pug'], server.reload);
gulp.task('sass-watch', ['sass'], server.reload);


gulp.task('watch', ['sass', 'pug'], () => {
  server({ server: config.build });

  gulp.watch([
    `${config.src}/scss/**/*.scss`,
    `${config.src}/templates/**/*.scss`
    ],
    ['sass-watch']);
  gulp.watch(`${config.src}/templates/**/*.pug`, ['pug-watch']);
});

gulp.task('default', ['watch']);