Use Gulp-rev-append to add a version number to the page reference and clear the page reference cache.
1. Install nodejs/Global Installation gulp/Project installation gulp/create Package.json and Gulpfile.js files1.1, Gulp Basic use has not yet mastered? See: Gulp for a more introductory tutorial
1.2. This example directory is structured as follows:
2, Local installation Gulp-rev-append2.1, Github:https://github.com/bustardcelly/gulp-rev-append
2.2. Installation: Command Prompt executioncnpm install gulp-rev-append --save-dev
2.3, note: Do not install cnpm please npm install gulp-rev-append --save-dev use what is CNPM, how to install?
2.4. Description: --save-dev Save configuration information to Package.json devdependencies node. Why Save to Package.json?
2.5, the effect is as follows:
3. Configuring HTML page References3.1. Gulp-rev-append plugin will pass regular (?: href|src) = "(. *) [?] rev= (. *) ["] Find and add a version number to the specified link (by default, the file MD5 generated, so the file does not change, this version number will not change)
JavaScript| 12345678910111213 | <! DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="Css/[email protected] @hash"> <script src="Js/[email protected" @hash "></script> <script src="Js/js-two.js"></script> </head> <body> <div>Hello, world ! </div> <img src="Img/test.jpg?r[email protected] @hash" alt="" c24>/> <script src="Js/[email protected" @hash "></script> </body> </HTML> |
4.1. Basic use (Add a version number to the page reference URL to clear the page cache)
JavaScript| 12345678 | var gulp = require(' Gulp '), rev = require(' gulp-rev-append '); Gulp. Task(' Testrev ', function () { Gulp. SRC(' src/html/index.html ') . Pipe(rev()) . Pipe(gulp. Dest(' dist/html ')); }); |
5.1. Command prompt execution:Gulp Testrev
6. Concluding remarks6.1, this article has any mistake, or has any question, welcome the message explanation.
This article was reproduced from: HTTP://WWW.YDCSS.COM/ARCHIVES/49
Gulp Configuration Version Number tutorial Gulp-rev-append
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
