it-swarm.com.ru

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

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

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

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

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

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

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

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

Вы можете использовать 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'));
});
18
Serrano

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

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

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

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

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

4
Jack

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

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

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

3
Chris W. Burke

Я работал над написанием регулярного выражения, которое в сочетании с [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']);
1
Satys