My first gulpfile.

gulpfile.js

var gulp         = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var minifyHTML   = require('gulp-minify-html');
var sass         = require('gulp-sass');
var minify       = require('gulp-minify-css');
var sourcemaps   = require('gulp-sourcemaps');
var rev          = require('gulp-rev');
var revReplace   = require('gulp-rev-replace');
var revNapkin    = require('gulp-rev-napkin');
var del          = require('del');
var path         = require('path');
var bower        = require('main-bower-files');
var browserSync  = require('browser-sync');
var proxy        = require('http-proxy-middleware');
var webpack      = require('webpack');
var fs           = require('fs');

var webpackManifest = function (publicPath, dest, filename) {
  filename = filename || 'rev-manifest.json';

  return function () {
    this.plugin("done", function (stats) {
      var stats    = stats.toJson();
      var chunks   = stats.assetsByChunkName;
      var manifest = {};

      for (var key in chunks) {
        var originalFilename = key + '.js';
        manifest[path.join(publicPath, originalFilename)] = path.join(publicPath, chunks[key]);
      }

      fs.writeFileSync(
        path.join(process.cwd(), dest, filename),
        JSON.stringify(manifest)
      );
    });
  };
};

var config = {
  root: {
    src: './src',
    dest: './public'
  },
  html: {
    src: 'html',
    dest: './'
  },
  css: {
    src: 'stylesheets',
    dest: 'stylesheets',
    autoprefixer: {
      browsers: ['last 3 version']
    },
    extensions: ['sass', 'scss', 'css']
  },
  js: {
    src: 'javascripts',
    dest: 'javascripts',
    extensions: ['js']
  },
  rev: {
    path: 'rev-manifest.json',
    options: {
      merge: true
    }
  }
};

var paths = {
  html: {
    src: path.join(config.root.src, config.html.src) + '/**/*.html',
    dest: path.join(config.root.dest, config.html.dest)
  },
  css: {
    src: bower({filter: '**/*.{' + config.css.extensions + ',}'}).concat([
      path.join(config.root.src, config.css.src, '/**/*.{' + config.css.extensions + ',}')
    ]),
    dest: path.join(config.root.dest, config.css.dest)
  },
  js: {
    context: path.join(config.root.src, config.js.src),
    entry: {
      app: ['./app.js']
    },
    output: {
      path: path.join(config.root.dest, config.js.dest),
      filename: '[name].js'
    },
    plugins: [webpackManifest(config.js.src, config.root.dest)]
  },
  rev: {
    dest: path.join(config.root.dest, config.rev.path)
  }
};

gulp.task('html', function() {
  return gulp.src(paths.html.src)
    .pipe(minifyHTML())
    .pipe(gulp.dest(paths.html.dest))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('css', function() {
  return gulp.src(paths.css.src)
    .pipe(sourcemaps.init())
    .pipe(sass({indentedSyntax: true}))
    .on('error', sass.logError)
    .pipe(autoprefixer(config.css.autoprefixer))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('js', function (cb) {
  webpack(paths.js, cb);
});

gulp.task('web', gulp.parallel('html', 'css', 'js'));

gulp.task('rev-assets', function() {
  var ignoreThese = '!' + path.join(config.root.dest,'/**/*+(css|js|json|html)');

  return gulp.src([path.join(config.root.dest,'/**/*'), ignoreThese])
    .pipe(rev())
    .pipe(gulp.dest(config.root.dest))
    .pipe(revNapkin({verbose: false}))
    .pipe(rev.manifest(paths.rev.dest, config.rev.options))
    .pipe(gulp.dest('.'));
});

gulp.task('rev-update-references', function() {
  return gulp.src(path.join(config.root.dest, '/**/**.{css,js}'))
    .pipe(revReplace({manifest: gulp.src(paths.rev.dest, {allowEmpty: true})}))
    .pipe(gulp.dest(config.root.dest));
});

gulp.task('rev-css', function() {
  return gulp.src(path.join(config.root.dest,'/**/*.css'))
    .pipe(rev())
    .pipe(minify())
    .pipe(gulp.dest(config.root.dest))
    .pipe(revNapkin({verbose: false}))
    .pipe(rev.manifest(paths.rev.dest, config.rev.options))
    .pipe(gulp.dest('.'));
});

gulp.task('rev-update-html', function() {
  return gulp.src(path.join(config.root.dest, '/**/*.html'))
    .pipe(revReplace({manifest: gulp.src(paths.rev.dest, {allowEmpty: true})}))
    .pipe(gulp.dest(config.root.dest));
});

gulp.task('rev', gulp.series(
  'rev-assets',
  'rev-update-references',
  'rev-css',
  'rev-update-html'
));

gulp.task('clean', function (cb) {
  return del(path.join(config.root.dest, '**'), cb);
});

gulp.task('build:production', gulp.series(
  'clean', 'web', 'rev'
));

gulp.task('server', function() {
  // Server files from the root of public
  browserSync({
    open: false,
    port: 9000,
    server: { baseDir: config.root.dest },
    middleware: proxy('/api', {
      target: 'http://localhost:3000'
    })
  });
});

gulp.task('watch', function () {
  gulp.watch(config.html.src, gulp.task('html'));
  gulp.watch(config.css.src, gulp.task('css'));
  gulp.watch(config.js.src, gulp.task('js'));
});

gulp.task('default', gulp.series(
  'clean', 'web', gulp.parallel('server', 'watch')
));