Question

我们使用gulp插件https://www.npmjs.com/package/gulp-iconfont和https://www.npmjs.com/package/gulp-iconfont-css分别生成icon-font和css。字体缓存在Chrome中，因此我想在styles.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');
      }

其中someVersion是时间戳或其他随机字符串，用于区分文件与先前版本。

我正在寻找一个gulp插件，它将解析css并在src字符串的末尾添加“salt”。

欢迎其他解决方案

Answer 1

我找到了一个利用此插件https://www.npmjs.com/package/gulp-modify-file的解决方案。这是基本的gulp任务：它在文件内容中查找some-icons.woff2并将其替换为some-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'))
});

在gulp生成的文件中进行文件src版本控制

1 个答案: