CSS・JSのキャッシュクリア｜「変更されてないです」から解放されるCache Bustingを４つ紹介

<!-- ローマ字でもOK -->
<img src="photo.jpg?renew">

<!-- 数字でもOK -->
<link rel="stylesheet" href="style.css?20220109">

<!-- 組み合わせてバージョン番号をつけてもOK -->
<script src="script.js?ver=1.2.1"></script>

/* 背景画像にもつけられます */
div{
  background-image: url(bg.jpg?20220720)
}

<?php $cachebusting = date('YmdHis', filemtime('style.css')); ?>
<link rel="stylesheet" href="style.css?<?php echo $cachebusting; ?>">

// アセットパス
define('ASSETS_DIR', get_template_directory_uri().'/assets');
define('ASSETS_PATH', get_template_directory().'/assets');

// CSS
$style_path = '/css/style.css';

wp_enqueue_style(
  'main', //ハンドル
  ASSETS_DIR.$style_path, //パス
  array(), //依存関係
  date('YmdHis',filemtime(ASSETS_PATH.$style_path)) //パラメーター
);

// JS
$js_path = '/js/script.js';

wp_enqueue_script(
  'main', //ハンドル
  ASSETS_DIR.$js_path, //パス
  array(), //依存関係
  date('YmdHis',filemtime(ASSETS_PATH.$js_path)) //パラメーター
);

npm install --save crypto
npm install --save-dev gulp-replace

const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const replace = require('gulp-replace');
const crypto = require('crypto');

const hash = crypto.randomBytes(6).toString('hex'); //16進数の乱数を生成

/**
 *  Sass
 */
const scss = () => {
  return gulp.src('src/scss/**/*.scss', {
    sourcemaps: true
  })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(gulp.dest('dist/css/', { sourcemaps: './' }))
}

/**
 *  HTML
 */
const html = () => {
  return gulp.src('src/index.html')
    .pipe(replace('.css','.css?'+hash))
    .pipe(replace('.js','.js?'+hash))
    .pipe(gulp.dest('dist'))
}

/**
 *  WATCH
 */
const watchfile = () => {
  gulp.watch('src/scss/**/*.scss', gulp.series(scss)),
  gulp.watch('src/index.html', gulp.series(html))
}

/**
 *  デフォルト
 */
exports.default = gulp.series(
  gulp.parallel(html,scss),
  gulp.parallel(watchfile)
);

<link rel="stylesheet" href="./css/style.css?f9ae1bf88a03">
<script src="./js/script.js?f9ae1bf88a03">

output: {
    filename: `./${dir.assets}/js/[name].[contenthash].js`,
    path: path.resolve(__dirname, 'dist'),
}

plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css",
  }),
]

<script defer src="main.ad63cc6359d5a6dcfa21.js"></script>
<link href="style.css?08fbf53aba5b1e2b4429" rel="stylesheet">