标签：pipe 简要 记录 rev js gulp json manifest
1.首先安装nodejs (版本号是12版本以上) 2.安装gulp: (安装gulp 4.0以上) npm install gulp 3.npm install：在项目中生成node_models文件夹 4.npm init：生成package.json文件 5.安装gulp插件：
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev 6.下一步配置gulpfile.js（在根目录下增加一个js文件）
var gulp = require('gulp'), rev = require('gulp-rev'), revCollector = require('gulp-asset-rev'); //开启一个任务 gulp.task('a', function(){ //检测gulp是否启动 console.log("gulp启动了"); })
var cssSrc = '*.css', jsSrc = '*.js'; //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revCss', function(){ return gulp.src(cssSrc) .pipe(rev()) //文件名加MD5后缀 .pipe(gulp.dest('dist')) //输出到css目录 .pipe(rev.manifest('rev-css-manifest.json')) //生成一个rev-manifest.json .pipe(gulp.dest('dist/rev')); //将 rev-manifest.json 保存到 rev 目录内 }); // //js生成文件hash编码并生成 rev-manifest.json文件名对照映射 gulp.task('revJs', function(){ return gulp.src(jsSrc) .pipe(rev()) .pipe(gulp.dest('dist'))//输出到css目录 .pipe(rev.manifest('rev-js-manifest.json')) .pipe(gulp.dest('dist/rev')); }); //Html替换css、js文件版本 gulp.task('revHtml', function () { return gulp.src(['dist/rev/*.json', '*.html']) .pipe(revCollector({ replaceReved: true, // 设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false })) .pipe(gulp.dest('dist')); }); //开发构建，默认任务 gulp.task('default',gulp.series(gulp.parallel('revCss','revJs','revHtml')));
运行gulp命令
注意事项： 1、源文件引用js和css时，不能加?v=，否则不会自动生成hash版本号
2、上面的var revCollector = require(‘gulp-asset-rev’); //给js css加版本号 gulp-asset-rev’模块就是用来给代码加版本号的 pipe方法里面调用 revCollector()此方法 版本号加好了但是是index-2345ejhd.js这种格式的不是我们想要的 我们希望是…/plugins/select/css/selectFilter.css?v=b2f872f 这种格式
运行gulp命令之前要是改node_models配置模块（行数不一定对得上仅做参考。）
①：gulp-rev（文件夹）下面的index.js:
（135行）manifest[originalFile] = revisionedFile;
改成：manifest[originalFile] = originalFile + '?v=' + file.revHash;
②：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]; （175行）regexp: new RegExp( prefixDelim + pattern, 'g' ),
改成：regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),
③：rev-path（文件夹）下面的index.js:
（9行）return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改成：return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
④：gulp-asset-rev（文件夹）下面的index.js：
（78行）var verStr = (options.verConnecter || "-") + md5;
改成：verStr = (options.verConnecter || "") + md5;
（80行）src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
改成：src=src+"?v="+verStr;
标签：pipe,简要,记录,rev,js,gulp,json,manifest 来源： https://www.cnblogs.com/yuyouyi/p/14756031.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。