webentwicklung-frage-antwort-db.com.de

gulp: Versionsnummer automatisch hinzufügen, um den Browser-Cache zu verhindern

Ich stelle mein Projekt bereit, indem ich Quelldateien mit gulp direkt auf dem Server baue. Um Caching-Probleme zu vermeiden, empfiehlt es sich, eine eindeutige Nummer für die Anforderungs-URL hinzuzufügen, siehe: Browser-Caching bei Aktualisierungen der Webanwendung verhindern

In npm-Repositorys konnte ich kein Werkzeug zum automatischen Hinzufügen der Versionsnummer zur Anforderung finden. Ich frage, ob jemand schon früher ein solches Werkzeug erfunden hat. 

Mögliche Implementierung könnte die folgende sein:

Ich habe eine Datei index.html im Ordner src/ mit folgendem Skript-Tag

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

Während des Erstellens wird er in den Ordner dist/ kopiert und der Kommentar wird durch die Nummer der automatischen Inkrementierung ersetzt

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

Sie können dazu gulp-version-number verwenden. Es kann Versionsnummern zu verknüpften Skripts, Stylesheets und anderen Dateien in Ihren HTML-Dokumenten hinzufügen, indem Sie ein Argument an die URLs anhängen. Zum Beispiel:

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

wird:

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

Sie müssen nicht einmal einen Platzhalter angeben, wie Sie es in Ihrer Beispielimplementierung gezeigt haben. Und es ist konfigurierbar.

Verwendungsbeispiel:

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

Sie können das Modul gulp-rev verwenden. Dadurch wird eine Versionsnummer an die Dateien angehängt. Die Version ist ein Hash des Dateiinhalts und ändert sich daher nur, wenn sich die Datei ändert. 

Sie geben dann eine Manifestdatei aus, die die Zuordnung zwischen der Datei enthält, z. Scripts.js bis Scripts-8wrefhn.js.

Verwenden Sie dann eine Hilfsfunktion, wenn Sie den Seiteninhalt zurückgeben, um die korrekten Werte zuzuordnen. 

Ich habe den obigen Prozess verwendet. Es gibt jedoch ein weiteres Modul gulp-rev-all, das eine gegabelte Erweiterung von gulp-rev ist, die ein wenig mehr tut, z. automatische Aktualisierung von Dateiverweisen in Seiten.

Dokumentation hier:

4
Jack

Es sieht so aus, als hätten Sie einige Optionen.

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

Hoffe das hilft.

3
Chris W. Burke

Ich habe an einem Regex gearbeitet, der zusammen mit [gulp-replace][1] gut funktioniert.

Den Code finden Sie unten. Nachfolgend finden Sie einen Schnellcode für das Codeigniter-Framework für Images und CSS für Views-Dateien. Es sollte jedoch für alle Arten von Dateien funktionieren, wenn der Quellordner richtig angegeben wurde. 

Sie können den Code entsprechend Ihrer Verwendung anpassen.

Sie können die Aufgaben vollständig aufrufen, indem Sie die Standard- oder Einzelaufgabe zu einem Zeitpunkt verwenden.

'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