GithubHelp home page GithubHelp logo

zy715 / gulp-rev-all-revise Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cttaohua/gulp-rev-all-revise

1.0 0.0 0.0 11 KB

gulp插件 静态资源加版本号防止缓存

Gherkin 18.18% JavaScript 81.82%

gulp-rev-all-revise's Introduction

gulp-rev-all-revise

gulp插件用于使用查询字符串文件哈希值加载文件末尾破坏缓存文件

特此说明:

本插件是在gulp-rev-append-all上改进而来,优化了gulp-rev-append-all在使用过程中可能出现的两个问题

1、gulp-rev-append-all无法处理绝对路径,因为在绝对路径下它无法找到目标文件,本插件可传参数 'assets': '../public' 解决此问题
2、gulp-rev-append-all无法第二次使用,原因是带了版本号的文件路径node不能读取,本插件已优化处理

安装

$ npm install gulp-rev-all-revise --save-dev

如何使用?

gulpfile.js

var rev = require('gulp-rev-all-revise');

gulp.task('rev', function() {
  gulp.src('./index.html')
    .pipe(rev())
    .pipe(gulp.dest('.'));
});

或者

var rev = require('gulp-rev-all-revise');

gulp.task('rev', function() {
  gulp.src('./index.html')
    .pipe(rev({
			assets: '../public'   //html和静态资源的相对路径
		}))
    .pipe(gulp.dest('.'));
});

terminal

$ gulp rev

原理?

[gulp-rev-all-revise] 是基于 gulp-rev-append-all插件允许给链接追加一个查询文件根据数据摘要算法得到的哈希值,html文件中声明使用以下正则表达式: (?:href=|src=|url\()['|"]([^\s>"']+?)['|"]

对于html文件中声明的任何样式表或脚本声明来说,这个可以防止浏览器缓存,如下所示:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style/style-one.css">
    <script src="script/script-one.js"></script>
    <script src="script/script-two.js"></script>
  </head>
  <body>
    <div><p>hello, world!</p></div>
    <script src="script/script-three.js"></script>
  </body>
</html>

运行完之后 gulp-rev-all-revise:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style/style-one.css?v=d65aaba987e9c1eefeb4be9cfd34e0de">
    <script src="script/script-one.js?v=17a5da6c8a2d875cf48aefb722eefa07"></script>
    <script src="script/script-two.js?v=d65aaba987e9c1eefeb4be9cfd34e0de"></script>
  </head>
  <body>
    <div><p>hello, world!</p></div>
    <script src="script/script-three.js?v=5cadf43edba6a97980d42331f9fffd17"></script>
  </body>
</html>

分享

在实际的开发中我们处理静态资源加载通常会设置nginx的缓存时间为永不过期,然后我们要给css和js加个后缀,通常是日期,在上线的时候修改后缀,通知浏览器我们更新了css和js,让浏览器重新去加载。 但是这种做法有个弊端,就是假如我们只修改了其中一个文件,但是浏览器要重新加载所有的文件。本插件完美的解决了这个问题,非常适用于使用gulp的多页面应用。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.