How to make a dynamic hash when building a project?

Question

gulp.js

I need to make sure that when the project is built, compressed css and js are formed (already implemented), but a version is added (for example, main.js? 8475675 or main_340583.js). So that when updating the site, cached styles and scripts in the browser do not spoil the picture.

At the same time, I need to automatically delete the old one in the folder during the build (not necessary, but ideally) and update them in html (which is assembled via pug).

since I'm a newbie in this business, I ask for help)

gulpfile.js looks like this now

'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 looks like this now

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