Как сделать динамический hash при билде проекта?

Question

[DiabloEN]

Мне нужно сделать так, что бы при билде проекта, формировался сжатый css и js (уже реализовано), но при этом добавлялась версия (например main.js?8475675 или main_340583.js). Что бы при обновлении сайта, кешированные стили и скрипты в браузере не портили картину.

При этом мне надо автоматически при билде удалять старый в папке (не обязательно, но в идеале) и обновлять в html их (который собирается через pug).

т. к. я в этом деле прям новичок-новичок, то прошу помощи)

gulpfile.js выглядит сейчас так

'use strict';


global.$ = {
  package: require('./package.json'),
  config: require('./gulp/config'),
  path: {
    task: require('./gulp/paths/tasks.js'),
    jsFoundation: require('./gulp/paths/js.foundation.js'),
    cssFoundation: require('./gulp/paths/css.foundation.js'),
    app: require('./gulp/paths/app.js')
  },
  gulp: require('gulp'),
  hash: require('gulp-hash'),
  del: require('del'),
  browserSync: require('browser-sync').create(),
  gp: require('gulp-load-plugins')(),
  fs: require('fs'),
  babel: require('gulp-babel'),
  uglify: require('gulp-uglify-es').default
};

$.path.task.forEach(function(taskPath) {
  require(taskPath)();
});

$.gulp.task('build', $.gulp.series(
  'clean',
  $.gulp.parallel(
    'sass',
    'pug',
    'js:foundation',
    'js:process',
    'copy:image',
    'copy:fonts',
    'css:foundation',
    'sprite:svg'
  )
));

$.gulp.task('default', $.gulp.parallel(
    'watch',
    'serve'
));

index.pug выглядит сейчас так

link(rel='stylesheet' href='css/foundation.css')
link(rel='stylesheet' href='css/main.min.css')