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

安装前的页面

想要实现的效果

要想实现这样的效果，需要使用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;  

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

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];  

还是这个文件，第139行

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

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

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

新建一个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']);