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

Question

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