gulp

添加版本号

需要插件:

"gulp-rev": "^8.0.0",
"gulp-rev-collector": "^1.2.2",

gulpfile.js

// 添加版本号
let rev = require('gulp-rev');  // 添加MD5后缀
let revCollector = require('gulp-rev-collector');  // 路径替换

// 压缩css
gulp.task('css', () =>
    gulp.src(app + 'css/*.*')
        .pipe(cleanCss())   //- 压缩处理成一行
        .pipe(rev())    //- 文件名加MD5后缀
        .pipe(gulp.dest(build + 'css'))  //- 输出文件本地
        .pipe(rev.manifest())   //- 生成一个rev-manifest.json
        .pipe(gulp.dest(build + 'css'))   //- 将 rev-manifest.json 保存到 rev 目录内
);

// 替换css路径
gulp.task('revcss', () => {
   gulp.src([build + 'css/*.json', build + '**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
       .pipe(revCollector())   //- 执行文件内css名的替换
       .pipe(gulp.dest(build));  //- 替换后的文件输出的目录
});

生成文件

gulp_第1张图片
css文件名

希望生成这样:


所以修改配置文件node_modules/

_gulp-rev/index.js
原来:manifest[originalFile] = revisionedFile;
替换:manifest[originalFile] = originalFile + '?v=' + file.revHash;

_gulp-rev/node_modules/rev-path/index.js
原来:`${filename}-${hash}${ext}`
替换:filename + ext
或
原来:return filename + '-' + hash + ext;
替换:return filename + ext;

_gulp-rev-collector/index.js
原来:path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' )
替换:path.basename(json[key]).split('?')[0]

执行命令:

gulp_第2张图片
css文件
gulp_第3张图片
html中css路径

你可能感兴趣的:(gulp)