gulpfile.js

const gulp = require('gulp')
const rename = require('gulp-rename')
const postcss = require('gulp-postcss')
const connect = require('gulp-connect')
const postcssPresetEnv = require('postcss-preset-env')

const path = {
  css: {
    src: './src/css/app.css',
    dest: './dist/css',
  },
  html: {
    src: './src/**/*.html',
    dest: './dist/',
  },
}

const plugins = [
  postcssPresetEnv({
    stage: 2,
    browsers: ['last 15 versions'],
    features: {
      'nesting-rules': true
    },
  }),
]

gulp.task('css', () => (
  gulp.src(path.css.src)
    .pipe(postcss(plugins))
    .pipe(rename('build.css'))
    .pipe(gulp.dest(path.css.dest))
    .pipe(connect.reload())
))

gulp.task('html', () => (
  gulp.src(path.html.src)
    .pipe(gulp.dest(path.html.dest))
    .pipe(connect.reload())
))

gulp.task('watch', () => {
  gulp.watch(path.css.src, ['css'])
  gulp.watch(path.html.src, ['html'])
})

gulp.task('connect', () => (
  connect.server({
    livereload: true,
    port: 8080,
    root: 'dist',
  })
))


gulp.task('default', ['html', 'css', 'connect', 'watch'])