我们使用Gulp Plugins https://www.npmjs.com/package/package/gulp-iconfont and https://www.npmjs.comcom/package/package/package/gulp-iconfont-css生成图标和CSS分别。字体在Chrome中被缓存,因此我想在字体源字符串的末尾添加版本编号。css.css。
这是我要转换的生成的CSS的一部分
@font-face {
font-family: "some-icons";
url('/assets/fonts/some-icons.woff2') format('woff2');
}
所需的输出为
@font-face {
font-family: "some-icons";
url('/assets/fonts/some-icons.woff2?v=someVersion') format('woff2');
}
其中某个文章是时间戳或其他将文件与以前版本区分开的随机字符串。
我正在寻找一个可以解析CSS并在SRC字符串末端添加"盐"的墨西哥插件。
欢迎其他解决方案
我找到了一个解决方案,利用此插件https://www.npmjs.com/package/gulp-modify-file。这是基本的Gulp任务:它在文件内容中寻找某个icons.woff2并用某个icons.woff2?v = timestamp
替换。'use strict';
const gulp = require('gulp');
const modify = require('gulp-modify-file');
const timestamp = Math.round(Date.now() / 1000);
gulp.task('modify', ()=> {
return gulp.src('tmp/styles.css')
.pipe(modify(
(content, path, file)=> {
content = content.replace('some-icons.woff2', 'some-icons.woff2?v=' + timestamp);
return `${content}`
}
))
.pipe(gulp.dest('dist'))
});