Есть ли способ, которым я могу использовать gulp для изменения моего index.thml, чтобы предотвратить кеширование CSS?

Question

У меня есть этот gulpfile.js код:

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('./')); 
}); 

То, что я думал только о том, если бы я мог получить gulpfile добавить в & сопровождаемого некоторым числом, который отличается каждый раз, когда я публикую.

Будет ли это способ гарантировать, что css не кэшируется, и если да, то как я могу обеспечить, чтобы каждый раз добавлялся другой номер?

Answer 1

Вы могли бы получить md5 хэш файла и добавляет, что в файл довольно легко, как это:

... 
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('./')); 
}); 

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

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