gulp: ब्राउज़र कैश को रोकने के लिए अनुरोध करने के लिए स्वचालित रूप से संस्करण संख्या जोड़ें

Question

मैं सर्वर पर गल्प अधिकार के साथ स्रोत फ़ाइलों का निर्माण करके अपनी परियोजना को तैनात करता हूं। कैशिंग मुद्दों को रोकने के लिए, सर्वोत्तम अभ्यास यूआरएल का अनुरोध करने के लिए एक अद्वितीय संख्या जोड़ सकता है, देखें: Preventing browser caching on web application upgrades;

एनपीएम रिपॉजिटरीज़ में, मुझे अनुरोध करने के लिए स्वचालित रूप से संस्करण संख्या जोड़ने के लिए कोई टूल नहीं मिला। मैं पूछ रहा हूं कि किसी ने पहले इस तरह के उपकरण का आविष्कार किया है या नहीं।

संभव कार्यान्वयन निम्नलिखित हो सकता है:

मैं src/ फ़ोल्डर में एक फ़ाइल index.html है, स्क्रिप्ट टैग

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

निम्नलिखित निर्माण यह dist/ फ़ोल्डर में प्रतिलिपि है के दौरान के साथ, और टिप्पणी बदल दिया जाता है autoincrement संख्या

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

Answer 1

ऐसा लगता है कि आपके पास कुछ विकल्प हो सकते हैं।

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

आशा इस मदद करता है।

Answer 2

आप gulp-rev मॉड्यूल का उपयोग कर सकते हैं। यह फ़ाइलों में एक संस्करण संख्या जोड़ देगा, संस्करण फ़ाइल सामग्री का हैश है, इसलिए फ़ाइल बदलता है तो यह केवल तभी बदल जाएगा।

फिर आप फ़ाइल के बीच मैपिंग युक्त एक मेनिफेस्ट फ़ाइल आउटपुट करते हैं उदा। Scripts.js से Scripts-8wrefhn.js.

फिर सही मूल्यों को मैप करने के लिए पृष्ठ सामग्री लौटने पर एक सहायक कार्य का उपयोग करें।

मैंने उपरोक्त प्रक्रिया का उपयोग किया है। हालांकि एक और मॉड्यूल gulp-rev-all है जो गल्प-रेव का एक फोर्कड एक्सटेंशन है जो थोड़ा और करता है, उदा। पृष्ठों में फ़ाइल संदर्भों का स्वत: अद्यतन।

यहाँ प्रलेखन:

• घूंट-राजस्व: https://github.com/sindresorhus/gulp-rev
• घूंट-राजस्व-सब: https://www.npmjs.com/package/gulp-rev-all

Answer 3

आप इस के लिए gulp-version-number उपयोग कर सकते हैं। यह यूआरएल के लिए तर्क जोड़कर, एचटीएमएल दस्तावेजों में लिंक्ड स्क्रिप्ट, स्टाइलशीट और अन्य फाइलों में वर्जन नंबर जोड़ सकता है। उदाहरण के लिए:

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