Gibt es eine Möglichkeit, gulp zu verwenden, um meine index.thml zu ändern, um CSS-Caching zu verhindern?

Question

Ich habe diese gulpfile.js Code:

gulp.task('make_prod_index', function() { 
    gulp.src('index.html') 
     .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css&12345')) 
     .pipe(rename("index-prod.html")) 
     .pipe(gulp.dest('./')); 
}); 

Was von Ich dachte, war, wenn ich die gulpfile in & durch eine Zahl gefolgt hinzuzufügen bekommen konnte, dass jedes Mal, wenn ich veröffentlichen anders.

Wäre dies ein Weg, um sicherzustellen, dass die CSS nicht im Cache gespeichert ist und wenn ja, wie könnte ich sicherstellen, dass bei jeder Veröffentlichung eine andere Nummer hinzugefügt wird?

Answer 1

Sie könnten den MD5-Hash der Datei bekommen und das ist ziemlich einfach an die Datei anhängen, wie folgt aus:

... 
var md5File = require('md5-file') 

gulp.task('make_prod_index', function() { 
    gulp.src('index.html') 
     .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css?' + md5File('content/bundles/css.min.css'))) 
     .pipe(rename("index-prod.html")) 
     .pipe(gulp.dest('./')); 
}); 

aber es ist besser, den Dateinamen für die meisten Caches zu ändern, um zu verhindern, eine Abfrage-String anhängt . Einige Caches sehen Dateien mit Abfragezeichenfolgen als dynamische Dateien und werden nicht zwischengespeichert.

Es kann mit der gulp-rev Aufgabe durchgeführt werden, für weitere Informationen überprüfen Sie die docs. Je nach Ihrer Lösung kann es etwas mehr Arbeit sein. Aber von dem, was ich sehe, könntest du mit etwas Einfachem wie gulp-rev-replace gehen.