Gulp: автоматически добавлять номер версии для запроса на предотвращение кеширования браузера

Я развертываю свой проект, создавая исходные файлы с gulp прямо на сервере. Чтобы предотвратить проблемы с кешированием, лучшей практикой может быть добавление уникального номера для запроса url, см. Предотвращение кеширования браузеров при обновлении веб-приложений;

В репозиториях npm я не смог найти инструмент для автоматического добавления номера версии для запроса. Я спрашиваю, раньше ли кто-то изобрел такой инструмент.

Возможная реализация может быть следующей:

У меня есть файл index.html в папке src/ со следующим тегом script

 <script src="js/app.js<!-- %nocache% -->"></script>

Во время сборки копируется в папку dist/, а комментарий заменяется номером автоинкремента

 <script src="js/app.js?t=1234"></script>

Ответы

Ответ 1

Вы можете использовать gulp-version-number. Он может добавлять номера версий в связанные скрипты, таблицы стилей и другие файлы в ваши HTML-документы, добавляя аргумент в URL-адреса. Например:

<link rel="stylesheet" href="main.css">

становится:

<link rel="stylesheet" href="main.css?v=474dee2efac59e2dcac7bf6c37365ed0">

Вам даже не нужно указывать местозаполнитель, как показано в примере реализации. И он настраивается.

Пример использования:

const $ = gulpLoadPlugins();
const versionConfig = {
  'value': '%MDS%',
  'append': {
    'key': 'v',
    'to': ['css', 'js'],
  },
};

gulp.task('html', () => {
  return gulp.src('src/**/*.html')
    .pipe($.htmlmin({collapseWhitespace: true}))
    .pipe($.versionNumber(versionConfig))
    .pipe(gulp.dest('docroot'));
});

Ответ 2

Похоже, у вас может быть несколько вариантов.

https://www.npmjs.com/package/gulp-cachebust https://www.npmjs.com/package/gulp-buster

Надеюсь, что это поможет.

Ответ 3

Вы можете использовать модуль gulp-rev. Это добавит номер версии в файлы, версия будет хешем содержимого файла, поэтому она изменится только в том случае, если файл изменится.

Затем вы выводите файл манифеста, содержащий сопоставление между файлом, например. Scripts.js до Scripts-8wrefhn.js.

Затем используйте вспомогательную функцию при возврате содержимого страницы для отображения правильных значений.

Я использовал вышеупомянутый процесс. Однако существует еще один модуль gulp-rev-all, который является разветвленным расширением gulp -rev, который делает немного больше, например. автоматическое обновление ссылок на файлы на страницах.

Документация здесь:

gulp -rev: https://github.com/sindresorhus/gulp-rev
gulp -rev-all: https://www.npmjs.com/package/gulp-rev-all