gulp 批量修改css,js版本

window下，使用gulp需要按nodejs

安装nodejs说明

https://blog.csdn.net/wsl3465205046/article/details/89473675

安装完成后 全局安装 gulp

npm install gulp -g

创建一个项目gulptest，cmd 到当前目录，执行

npm init

会创建生成一个package.json文件，如果没有修改一直回车就行

执行yes,package.json.生成后，执行

npm install gulp --save-dev

修改需要版本路径 需要以下包

npm install --save-dev gulp-rev

npm install --save-dev gulp-rev-collector

npm install --save-dev run-sequence

 

局部安装gulp在项目下会生成依赖包node_modules，

创建gulpfile.js文件(4.0.2版本，不同的版本方法入参不同，具体请参考官方文档)，虚线 部分为gulpfile.js原码如下 

注意事项：红色边框内容为读取路径,蓝色为编译后输入路径

----------------------------------------------------------------------------------------------------------------------

//引入gulp和gulp插件

var gulp = require('gulp'),     

    rev = require('gulp-rev'),  

    revCollector = require('gulp-rev-collector'),     

    runSequence = require('run-sequence');   

    

//CSS文件生成版本号(hash编码),并将所有带有版本号的文件放入rev-manifest.json中

gulp.task('revCss', function(){         //gulp.task--定义一个gulp任务；revCSS--定义该任务的名称，起任何名称都可以

    return gulp.src('./static/css/*.css')        //gulp.src--要操作的源文件路径

        .pipe(rev())                    //定义一个流，将所有匹配到的文件名全部生成相应的版本号

        .pipe(rev.manifest())           //把所有生成的带版本号的文件名保存到json文件中

        .pipe(gulp.dest('static/css'));    //把json文件保存到指定的路径，即src下面的css文件，没有该文件，会自动创建

});

//CSS文件生成版本号,并将所有带有版本号的文件放入json中

gulp.task('revJs', function(){

    return gulp.src('./static/js/*.js')

        .pipe(rev())

        .pipe(rev.manifest())

        .pipe(gulp.dest('static/js'));

});

//将html文件中的css,js文件引入路径全部替换成带有版本号的

gulp.task('revHtml', function () {

    return gulp.src(['static/**/*.json', './*.html'])   //gulp.src--第一个参数：生成的json文件的路径，我这里将所有的json文件，js和css,都选中；第二个参数：要替换css,js文件(路径)的HTML文件

        .pipe(revCollector())

        .pipe(gulp.dest('./'));       //html更换css,js文件版本，更改完成之后保存的地址

});

//开发构建

gulp.task('default',gulp.series(['revCss','revJs','revHtml']));

----------------------------------------------------------------------------------------------------------------------

完整项目结构如下，

static文件，及index.html是测试使用的静态资源

 

修改以下对应依赖包

1、路径 node_modules/gulp-rev/index.js
第135行  manifest[originalFile] = revisionedFile;
更改为   manifest[originalFile] = originalFile + '?v=' + file.revHash;

2、路径 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];
第173行  regexp: new RegExp( prefixDelim + pattern, 'g' ),
更改为   regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

3、路径 node_modules/rev-path/index.js
第9行    return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更改为   return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

最后cmd,对应的项目下执行gulp