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

Question

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

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

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

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

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

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

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

Answer 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'));
});

Answer 2

Вы можете использовать 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

Answer 3

Я работал над написанием регулярного выражения, которое используется вместе с [gulp-replace][1] работает просто отлично.

Пожалуйста, найдите код ниже. Ниже приведен быстрый код для изображения и CSS для просмотра файлов codeigniter Framework. Но он должен хорошо работать для всех типов файлов, если исходная папка указана правильно.

Вы можете настроить код в соответствии с вашим использованием.

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

'use strict';

var gulp = require('gulp');
var replace = require('gulp-replace');

function makeid() {
  return (Math.random() + 1).toString(36).substring(7);
}



gulp.task('versioningCss', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.css\?(_v=.+&)*(.*)/g, '$1.css?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.css\"(.*)/g, '$1.css?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.css\'(.*)/g, '$1.css?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningJs', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.js\?(_v=.+&)*(.*)/g, '$1.js?_v='+makeid()+'&$3'))
    .pipe(replace(/(.*)\.js\"(.*)/g, '$1.js?_v='+makeid()+'"$2'))
    .pipe(replace(/(.*)\.js\'(.*)/g, '$1.js?_v='+makeid()+'\'$2'))
    .pipe(gulp.dest('application/modules'));
});

gulp.task('versioningImage', () => {
  return gulp.src('application/modules/**/views/*.php')
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\?(_v=.+&)*(.*)/g, '$1.$2?_v='+makeid()+'&$4'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\"(.*)/g, '$1.$2?_v='+makeid()+'"$3'))
    .pipe(replace(/(.*)\.(png|jpg|jpeg|gif)\'(.*)/g, '$1.$2?_v='+makeid()+'\'$3'));
});

gulp.task('default', [ 'versioningCss', 'versioningJs', 'versioningImage']);

Answer 4

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

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

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

Answer 5

Ты можешь использовать

<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.Ticks%>"></script>

или же

<script type="text/javascript" src="js/app.js?seq=<%=DateTime.Now.ToString("yyyyMMddHHmm") %>"></script>