[最新]gulp自动给css、js后加上版本号。

开发调优
1

安装前的页面

2db3bdd31bdc9979984ef39169ae481a.png

想要实现的效果

2bcd0bd89b8ec7b24b89d6358971d8f4.png

要想实现这样的效果，需要使用gulp。

安装gulp前要先安装Node.js和npm，安装方法请百度。

防止gulp安装失败，还先把npm的源换乘国内的淘宝源。

npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装gulp

cnpm install gulp -g  
cnpm install --save-dev gulp

查看gulp是否安装成功

gulp -v

出现版本号则表示安装成功

安装这三个gulp插件

cnpm install --save-dev gulp-rev  
cnpm install --save-dev gulp-rev-collector  
cnpm install --save-dev run-sequence

更改gulp-rev和gulp-rev-collector

vi  node_modules/gulp-rev/index.js

修改第134行

// manifest[originalFile] = revisionedFile;  
manifest[originalFile] = originalFile + '?v=' + file.revHash;

183231a66d46dc7b7f446cb34375cbb6.png

vi node_modules/gulp-rev/node_modules/rev-path/index.js

修改第9行

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

f555e1d2c6e803379c1150d8c9f57319.png

vi node_modules/gulp-rev-collector/index.js

修改第40行

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

8f3749c0e17ec84ce52f17a5a10c9e19.png

还是这个文件，第139行

// regexp: new RegExp(  dirRule.dirRX + pattern, 'g' ),  
regexp: new RegExp(  dirRule.dirRX + pattern +'(\\?v=\\w{10})?', 'g' ),

8f804dbc18cc94615cbf33fd6793f1be.png

继续修改这个文件，第164行

// regexp: new RegExp( prefixDelim + pattern, 'g' ),  
regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10,})?', 'g' ),

51899ac160fafb37e92b34757b78fc8e.png

新建一个gulpfile.js文件

vi gulpfile.js

内容如下

//引入gulp和gulp插件        
var gulp = require('gulp'),        
    runSequence = require('run-sequence'),       
    rev = require('gulp-rev'),        
    revCollector = require('gulp-rev-collector');        
  
//定义css、js源文件路径。这里填写自己真实的路径        
var cssSrc = '[你的真实项目地址]/static/css/*.css',        
    jsSrc = '[你的真实项目地址]/static/js/*.js';        
  
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射        
gulp.task('revCss', function(){        
    return gulp.src(cssSrc)        
        .pipe(rev())        
        .pipe(rev.manifest())        
        //.pipe(minifycss())   //压缩css，需要新的插件，下载速度太慢，我放弃了        
        .pipe(gulp.dest('rev/css'));        
});        
  
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射        
gulp.task('revJs', function(){        
    return gulp.src(jsSrc)        
        .pipe(rev())        
        .pipe(rev.manifest())        
        //.pipe(uglify())    ////压缩JS，需要新的插件，下载速度太慢，我放弃了        
        .pipe(gulp.dest('rev/js'));        
});        
  
//Html替换css、js文件版本        
gulp.task('revHtml', function () {        
    return gulp.src(['rev/**/*.json', '[你的真实项目地址]/**/view/**/*.html'])//填写自己的真实模板存放位置        
        .pipe(revCollector())        
        .pipe(gulp.dest('[你的真实项目地址]/application'));        
});        
  
//task合并顺序执行        
gulp.task('dev', function (done) {        
    condition = false;        
    runSequence(        
        ['revCss'],        
        ['revJs'],        
        ['revHtml'],        
        done);        
});        
  
gulp.task('default', ['dev']);