gulpfile.js自动化解决js、css缓存问题（添加版本号）

桃扇骨 2022-06-12 13:45 209阅读 0赞

# gulpfile.js自动化解决js、css缓存问题    #

直接进入主题，自动化解决前端页面js、css由于投版本造成用户本地缓存与生成版本不一致情况。

首先安装nodejs（处理此问题的强大插件）：

去 https://nodejs.org/en/下载安装文件安装即可。

安装完成后，在终端输入node -v回车打印出nodejs的版本号，说明nodejs安装成功。

在终端输入npm -v

回车打印出npm的版本号，说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)。

以上安装成功后，下面来下载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

rev是主要处理工具。

接下来就是处理下内部js源码：

在node\_modules文件夹中找到gulp-rev/index.js

修改144行 （修改此处目的是修改对应生成的后缀值）

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

找到gulp-rev- collector/index.js（网上版本是之前版本的gulp对应的107行结果，目前下载的最新版本对应的代码已经更换）

修改139  164行 （修改此处是为了更新文件时正则的匹配内容将对应结果进行值替换）

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

然后编写一个gulpfile.js(用于执行gulp命令时默认调用)

//引入gulp和gulp插件
    var gulp = require('gulp'),
        runSequence = require('run-sequence'),
        rev = require('gulp-rev'),
        revCollector = require('gulp-rev-collector');
    //定义css、js源文件路径
    var cssSrc = 'webapp/WEB-INF/**/*.css',
    //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
        jsSrc = 'webapp/WEB-INF/**/*.js';
    
    gulp.task('revCss', function(){
            .pipe(gulp.dest('rev/css'));
        return gulp.src(cssSrc)
            .pipe(rev())
            .pipe(rev.manifest())
    });
    
    
        return gulp.src(jsSrc)
    //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
    gulp.task('revJs', function(){
            .pipe(rev.manifest())
            .pipe(rev())
        return gulp.src(['rev/**/*.json', 'webapp/**/*.jsp'])
            .pipe(gulp.dest('rev/js'));
    });
    
    
    //Html替换css、js文件版本
            .pipe(revCollector())
    gulp.task('revHtml', function () {
            ['revJs'],
            .pipe(gulp.dest('webapp'));
    });
    
    
    //开发构建
        condition = false;
    gulp.task('dev', function (done) {
    gulp.task('default', ['dev']);
        runSequence(
            ['revCss'],
            ['revHtml'],
            done);
    });

地址路径可以任意配置，只需要能通过执行命令是能找到对应的js、css和jsp文件即可。

上述文件中默认路径是node\_modules、webapp、gulpfile.js在同一目录下。（在安装gulp时，选择的安装路径即时此路径，所以所有操作都是在此路径下执行的（也就是在项目路径中），当然如果想和项目路径分离，只需要将gulpfile.js中指向地址修改，将node\_modules安装时或者安装完的文件挪到相应目录下，然后执行gulp即可（node\_modules和gulpfile.js放在同一级目录下））。