前端静态能源版本更新利用gulp自动化增加版本号,给能源文件增添指纹

至于怎么要费尽心境地给文件增多指纹,请参考前者静态财富缓存调节计策。此番要达到规定的标准的小目标就是生成的财富文件能够被客户端缓存,而在文件内容改造后,能够呼吁到最新的文书。

前端静态能源版本更新利用gulp自动化增加版本号,给能源文件增添指纹。项目每趟公布后,会有缓存难题,导致页面不更新,尤其是微信浏览器,缓存境况更为严重。然后采取gulp
给js,css自动化增多版本号,可解决缓存的主题材料。
互连网资料中一般有八个艺术
一.生成3个新的dist目录,里面含有了要发表的html,js,css等文件 。
二.在原本的HTML文件上实行js ,css版本的更迭,不须要生成新的目录文件。

店4项目每一次发布后,偶尔会有缓存难题,然后看了下gulp,开掘gulp还能够给js,css自动化增多版本号,可缓慢解决缓存的标题,所以自动化完结静态财富的版本更新才是正道。通过英特网的资料试过了二种办法:

亟待利用的 gulp 插件是
gulp-rev2 ,看明白了,不是
gulp-rev + gulp-rev-collector 的不佳组合,而是
gulp-rev2。

网络介绍的本子都相比旧,以下为新型gulp版本的修改方案:

壹.生成一个新的dist目录,里面包涵了要发布的html,js,css等公事 。

gulp-rev2 的规划思路:

一 、要落成的效果.

  1. 修改js和css文件
  2. 澳门葡京 ,由此对js,css文件内容张开hash运算,生成一个文本的唯一hash字符串(如若文件修改则hash号会爆发变化)
  3. 轮换原html中的js,css文件名,生成四个带本子号的文书名
    原结构下html文件代码:

<link rel="stylesheet" href="../css/style.css">
<script src="../js/index.js"></script>

要达成的意义:在原结构下html文件代码

<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script>
贰.在本来的HTML文件上进展js ,css版本的替换,不要求生成新的目录文件。

经过三种办法的实施进程比较,决定选取第三种格局,所以那边介绍一下次之种方法的落成进程:

一.

  1. 基于文件的剧情 file.contents 生成文件指纹(hash值);

  2. 基于前边生成的文本指纹集结成一张(源文件,构建文件)光彩夺目对照表(并保存在清单文件
    rev-manifest.json 中);

  3. 依据前边生成的炫丽对照表级联更新存在引用的父文件;

二 、完毕步骤

1.安装node然后安装gulp和gulp插件:

npm install --save-dev gulp@3.9.1
npm install --save-dev  gulp-rev@8.1.0
npm install --save-dev gulp-rev-collector@1.2.3
npm install --save-dev run-sequence

2.编写gulpfile.js

//引入gulp和gulp插件
  var gulp = require('gulp'),  
  runSequence = require('run-sequence'),   
  rev = require('gulp-rev'),    
  revCollector = require('gulp-rev-collector');

//定义css、js文件路线,是地面css,js文件的路径,可活动布置

  var cssUrl = 'css/*.css',   
  jsUrl = 'js/*.js';

//CSS生成文件hash编码并转移 rev-manifest.json文件名对照映射

  gulp.task('revCss', function(){   
  return gulp.src(cssUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/css'));
 });

//js生成文件hash编码并转移 rev-manifest.json文件名对照映射

  gulp.task('revJs', function(){    
  return gulp.src(jsUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/js'));
 });

//Html改动css、js文件版本

   gulp.task('revHtml', function () {    
   return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html'])  /*WEB-INF/views是本地html文件的路径,可自行配置*/        
  .pipe(revCollector())        
  .pipe(gulp.dest('WEB-INF/views'));  /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
 });

//开发构建

  gulp.task('dev', function (done) {   
  condition = false;   
  runSequence(       
  ['revCss'],       
  ['revJs'],        
  ['revHtml'],        
  done);});
  gulp.task('default', ['dev']);

三.更改gulp-rev和gulp-rev-collector(重要)

1.打开node_modules\gulp-rev\index.js

    第144行 manifest[originalFile] = revisionedFile;
    更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

给文件名扩充?v=hash的后缀
小心: 由于gulp-rev的版本差异,代码行修改位置或许有变换。

2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
找到return modifyFilename方法 ,更改为:

    return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

3.打开node_modules\gulp-rev-collector\index.js
修改如下一些:

    //var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ); 
      var cleanReplacement =  path.basename(json[key]).split('?')[0];

然后 修改17八行左右为:

 //增加正则后缀,以防止每次都追加?v=hash

                   var afterDelim = '[\?A-Za-z0-9_\=]*' 
                    changes.push({
                        regexp: new RegExp( prefixDelim + pattern+afterDelim, 'g' ), //增加后缀匹配
                        patternLength: pattern.length,
                        replacement: '$1' + manifest[key]
                    });

四.实行gulp命令,得到的结果如下

 <link rel="stylesheet" href="../css/style.css?v=0d83247610">
 <script src="../js/index.js?v=61c1ef9f34"></script>

五.更改gulp-rev和gulp-rev-collector的原理
当你成功第3步gulpfile.js的编写,然后奉行gulp后,你会发觉效果如下:
//rev目录下生成了manifest.json对应文件

   { "style.css": "style-0d83247610.css"}
    <link rel="stylesheet" href="../css/style-0d83247610.css">
    <script src="../js/index-61c1ef9f34.js"></script>

那眼看未有完结大家想要的意义,所以要依据第1步的必要改动代码!

1. 修改js和css文件

下边以3个现实的栗子为例实行实践。

贰. 透过对js,css文件内容开始展览hash运算,生成四个文书的唯1hash字符串(假若文件修改则hash号会爆发变化)
三. 交替原html中的js,css文件名,生成3个带本子号的文件名
原结构下html文件代码:
<link rel="stylesheet" href="../css/style.css">
<script src="../js/index.js"></script>
要达到规定的标准的法力:在原结构下html文件代码
<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script></br>

二.

栗子的目录结构是这么的:

一.当作项目的付出重视(devDependencies)安装gulp和gulp插件:
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence
2.编写gulpfile.js
//引入gulp和gulp插件
  var gulp = require('gulp'),  
  runSequence = require('run-sequence'),   
  rev = require('gulp-rev'),    
  revCollector = require('gulp-rev-collector');
//定义css、js文件路径,是本地css,js文件的路径,可自行配置
  var cssUrl = 'css/*.css',   
  jsUrl = 'js/*.js';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task('revCss', function(){   
  return gulp.src(cssUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/css'));
 });
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task('revJs', function(){    
  return gulp.src(jsUrl)        
 .pipe(rev())        
 .pipe(rev.manifest())        
 .pipe(gulp.dest('rev/js'));
 });
 //Html更换css、js文件版本
   gulp.task('revHtml', function () {    
   return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html'])  /*WEB-INF/views是本地html文件的路径,可自行配置*/        
  .pipe(revCollector())        
  .pipe(gulp.dest('WEB-INF/views'));  /*Html更换css、js文件版本,WEB-INF/views也是和本地html文件的路径一致*/
 });
//开发构建
  gulp.task('dev', function (done) {   
  condition = false;   
  runSequence(       
  ['revCss'],       
  ['revJs'],        
  ['revHtml'],        
  done);});
  gulp.task('default', ['dev']);
三.更改gulp-rev和gulp-rev-collector(重要)
  1.打开node_modules\gulp-rev\index.js
    第144行 manifest[originalFile] = revisionedFile;
    更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
  2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
    10行 return filename + '-' + hash + ext;
    更新为: return filename + ext;
  3.打开node_modules\gulp-rev-collector\index.js
    31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
    更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {</br>
四.实行gulp命令,获得的结果如下
 <link rel="stylesheet" href="../css/style.css?v=0d83247610">
 <script src="../js/index.js?v=61c1ef9f34"></script>
五.更改gulp-rev和gulp-rev-collector的原理
 当你完成第二步gulpfile.js的编写,然后执行gulp后,你会发现效果如下:
 //rev目录下生成了manifest.json对应文件
   { "style.css": "style-0d83247610.css"}
    <link rel="stylesheet" href="../css/style-0d83247610.css">
    <script src="../js/index-61c1ef9f34.js"></script>
 这明显没有达到我们想要的效果,所以要按照第三步的要求更改代码!

澳门葡京 1

里头涵盖3个 css 样式源文件 .demo/demo.css,内容如下

a { background: url(../images/road.jpg); }
div { background: url(../images/a+b.jpg); }

接下去使用 gulp 实行营造,新建多个任务,叁个营造 image,2个创设 css,

const gulp = require('gulp');
const rev2 = require('gulp-rev2');

gulp.task('build:image', ()=>{
    return gulp.src('./demo/**/*.{png,jpg,gif,ico}')
        .pipe(rev2())               // 生成文件指纹并修改文件名
        .pipe(gulp.dest('dist'))    // 输出到 dist 目录
        .pipe(rev2.manifest())      // 生成映射对照表 rev-manifest.js
        .pipe(gulp.dest('.'));      // 输出到 gulpfile.js 同级目录
});

gulp.task('build:css', ['build:image'], ()=>{
    return gulp.src('./demo/**/*.css')
        .pipe(rev2.update())        // 根据映射对照表更新存在引用的父文件
        .pipe(gulp.dest('dist'))
});

然后施行 gulp build:css,会意识根目录下生成了 dist
目录,并在在那之中存放了营造后的文件,

澳门葡京 2

密切的校友大概早就意识在营造之后 ./demo/image/
目录下的图片财富已经增多了文件指纹,

澳门葡京 3

此时展开生成的 ./dist/demo.css,内容如下

a { background: url(../images/road-f7ee61d96b.jpg); }
div { background: url(../images/a+b-d41d8cd98f.jpg); }

能够观察引用了图片财富的 css
文件内容也获得了对应更新。只要图片能源发生更新(文件指纹就能发生变化),引用者(css文件)也理应级联更新。那七个应该是一直同步的,不然就能产出驴唇不对马嘴引用错乱。

文件指纹总算加上了,可是那种修改文件名的艺术并不延续所愿意的。有时大家大概要求更简便守旧的格局,也正是通过url参数(query
string)的款型展按钮联。也正是我们目的在于的 css 或者是如此的:

a { background: url(../images/road.jpg?_v_=f7ee61d96b); }
div { background: url(../images/a+b.jpg?_v_=d41d8cd98f); }

gulp-rev2
已经提供了这么些选项,能够说是服务十三分完美。只需求在原先的 gulp
代码上简单加1行配置项:

. . .
    .pipe(rev2({                // 生成文件指纹并修改文件名
        query: true,            // 以query string的方式进行指纹关联
    }))
. . .

重新实行 gulp build:css,打开
./dist/demo.css,会发现样式表已经济体改为了作者们预料的样板:

a { background: url(../images/road.jpg?_v_=f7ee61d96b); }
div { background: url(../images/a+b.jpg?_v_=d41d8cd98f); }

您能够品尝对单个图片财富拓展立异(举例 override
操作),gulp-rev2
只会更新发生转移的财富的指纹,那也是所企盼的。

注意点

...
.pipe(rev2.manifest())      // 生成映射对照表 rev-manifest.js
.pipe(gulp.dest('.'));      // 输出到 gulpfile.js 同级目录

请确保
gulp-rev2 生成的清单文件
rev-manifest.js 输出在 gulpfile.js 同级目录下。那是因为
gulp-rev2
会在这么些目录进行读取,不然将会导致错误。建议你在 .gitignore
文件中不经意掉该公文,因为它是创设调换的,没有其余参加版本调整的须要。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website