gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync')
const sass = require('gulp-sass')(require('sass'))
const sassGlob = require('gulp-sass-glob')
const cleanCSS = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')
const rename = require('gulp-rename')
const imagemin = require('gulp-imagemin')
const htmlmin = require('gulp-htmlmin')

gulp.task('server', function () {
  browserSync({
    server: {
      baseDir: 'dist',
    },
  })

  gulp.watch('src/*.html').on('change', browserSync.reload)
})

gulp.task('styles', function () {
  return gulp
    .src('src/sass/**/*.+(scss|sass)')
    .pipe(sassGlob())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(rename({ suffix: '.min', prefix: '' }))
    .pipe(autoprefixer())
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream())
})

gulp.task('watch', function () {
  gulp.watch('src/sass/**/*.+(scss|sass|css)', gulp.parallel('styles'))
  gulp.watch('src/js/**/*.js', gulp.parallel('scripts'))
  gulp.watch('src/*.html').on('change', gulp.parallel('html'))
  gulp.watch('src/favicon/**/*', gulp.parallel('favicon'))
})

gulp.task('html', function () {
  return gulp
    .src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist/'))
})

gulp.task('scripts', function () {
  return gulp.src('src/js/**/*.js').pipe(gulp.dest('dist/js')).pipe(browserSync.stream())
})

gulp.task('fonts', function () {
  return gulp.src('src/fonts/**/*').pipe(gulp.dest('dist/fonts'))
})

gulp.task('icons', function () {
  return gulp.src('src/icons/**/*').pipe(gulp.dest('dist/icons'))
})

gulp.task('images', function () {
  return gulp.src('src/img/**/*').pipe(imagemin()).pipe(gulp.dest('dist/img'))
})

gulp.task('favicon', function () {
  return gulp.src('src/favicon/**/*').pipe(gulp.dest('dist/favicon'))
})

gulp.task('default', gulp.parallel('watch', 'server', 'styles', 'scripts', 'fonts', 'icons', 'html', 'images', 'favicon'))