Разрушение кэша в gulp работает только с индексом. Изменения html, а не css или js.

Question

У меня проблемы с кешем браузера, поэтому я пытаюсь обновить индексный файл. html, если файлы css, js или html изменены.

Строка Я хочу обновить это:

<link rel="stylesheet" href="styles/main.css?cb=123" />

, что более важно, ? Cb = 123 part

В основном моя функция gulp ищет 'cb =' и обновляет ее с помощью новый номер на основе даты и времени.

Этот индекс. html прекрасно обновляется, если я использую следующий файл gulpfile. js. Любые изменения в файле индекса. html приводят к новому номеру cb .

// --------------------------------------------
// Gulp Loader
// --------------------------------------------

const {
    src,
    dest,
    task,
    watch,
    series,
    parallel
  } = require("gulp");

  // --------------------------------------------
  // Dependencies
  // --------------------------------------------

  const homedir = require("os").homedir();
  var path = require("path");
  var pathDir = require("path").resolve(__dirname, "../../");
  var parentDir = path
    .dirname(pathDir)
    .split(path.sep)
    .pop();

  var newParent = parentDir.split(" ").join("_");

  var parentdir = path.basename(path.dirname(pathDir));
  parentdir = parentDir.replace(/[^\w]/g, "");
  parentdir = parentDir.replace(/[^\w]/g, "").toLowerCase();

  // HTML plugins
  let htmlmin = require("gulp-htmlmin");

  // CSS / SASS plugins
  let sass = require("gulp-sass");
  let autoprefixer = require("autoprefixer");
  let minifycss = require("gulp-clean-css");
  let postcss = require("gulp-postcss");
  let cssnano = require("cssnano");

  // JSS / plugins
  let uglify = require("gulp-uglify");

  // Utility plugins
  let concat = require("gulp-concat");
  let del = require("del");
  let plumber = require("gulp-plumber");
  let sourcemaps = require("gulp-sourcemaps");
  let rename = require("gulp-rename");
  let fileinclude = require("gulp-file-include");
  var replace = require('gulp-replace');

  // Browser plugins
  let browserSync = require("browser-sync").create();

  // Images plugins
  let imagemin = require("gulp-imagemin");
  let embedSvg = require("gulp-embed-svg");

  // --------------------------------------------
  // Project Variables
  // --------------------------------------------

  let htmlSrc = "source/";
  let htmlDest = homedir + "/sites/blog/";

  let incSrc = "source/includes/";

  let styleSrc = "source/styles/";
  let styleDest = homedir + "/sites/blog/styles/";

  let vendorSrc = "source/scripts/vendors/";
  let scriptSrc = "source/scripts/";
  let scriptDest = homedir + "/sites/blog/scripts/";

  let imageSrc = "source/images/";
  let imageDest = homedir + "/sites/blog/images/";

  let fontSrc = "source/fonts/";
  let fontDest = homedir + "/sites/blog/fonts/";

  // --------------------------------------------
  // Tasks
  // --------------------------------------------

  // CSS
  function css(done) {
    src([
      styleSrc + 'main.scss',
    ])

      .pipe(sass({
        outputStyle: 'compressed'
      }))
      .pipe(plumber())
      .pipe(dest(styleDest));
    done();
  };

  // JS
  function js(done) {
    src([scriptSrc + "*.js", vendorSrc + "*.js"])
      .pipe(
        rename({
          basename: "main",
          suffix: ".min"
        })
      )
      .pipe(plumber())
      .pipe(uglify())
      .pipe(dest(scriptDest));
    done();
  }

  // HTML
  function html(done) {
    var cbString = new Date().getTime();
    src(htmlSrc + "index.html")
      .pipe(
        fileinclude({
          prefix: "@@",
          basepath: "source/includes"
        })
      )
      .pipe(replace(/cb=\d+/, 'cb=' + cbString))
      .pipe(
        embedSvg({
          root: "./source/images/",
          selectors: ".inline-svg"
        })
      )
      .pipe(
        htmlmin({
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: {
            compress: {
              drop_console: true
            }
          },
          processConditionalComments: true,
          removeComments: true,
          removeEmptyAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          processScripts: ["application/ld+json"]
        })
      )
      .pipe(dest(htmlDest));
    done();
  }

  // IMAGES
  function img(done) {
    src(imageSrc + "*")
      .pipe(imagemin())
      .pipe(dest(imageDest));
    done();
  }

  // FONTS
  function fonts(done) {
    src(fontSrc + "*").pipe(dest(fontDest));
    done();
  }

  // --------------------------------------------
  // Watch for changes
  // --------------------------------------------

  function watcher() {
    // Serve files from the root of this project
    browserSync.init({
      server: {
        baseDir: homedir + "/sites/blog/",
      },
      notify: false
    });

    watch(htmlSrc, series(html)).on("change", browserSync.reload);
    watch(styleSrc, series(css)).on("change", browserSync.reload);
    watch(scriptSrc, series(js)).on("change", browserSync.reload);
    watch(imageSrc, series(img)).on("change", browserSync.reload);
    watch(imageSrc, series(fonts)).on("change", browserSync.reload);
  }

  // use default task to launch Browsersync and watch JS files
  var build = parallel(css, js, html, img, fonts, watcher);
  task("default", build);

Но номер обновляется только в том случае, если файл индекса. html изменяется, поэтому обратно чертежная доска ..

Теперь, когда я хочу, чтобы число обновлялось, если я обновляю файлы js или css, я попытался извлечь следующую строку из функции html и дать ей функция:

.pipe(replace(/cb=\d+/, 'cb=' + cbString))

Примерно так:

// Cachebust
function cacheBustTask(done) {
  var cbString = new Date().getTime();
  src(htmlSrc + "index.html")
    .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
    .pipe(dest(htmlDest));
  done();
}

Но это тормозит сайт.

Любые идеи, как я могу получить задачу cacheBustTask работать вместе с задачей html.

Вот полный обновленный gulpfile. js с отдельной cacheBustTask задача / функция