gulp生成文件中的文件src版本控制 [英] file src versioning in gulp generated file

问题描述

我们使用gulp插件 https://www.npmjs.com/package/gulp-iconfont 和 https://www.npmjs.com/package/gulp-iconfont -css 分别生成图标字体和css.字体被缓存在Chrome中，因此我想在styles.css的字体源字符串的末尾添加版本号.

We use gulp plugins https://www.npmjs.com/package/gulp-iconfont and https://www.npmjs.com/package/gulp-iconfont-css to generate icon-font and css respectively. The fonts are cached in Chrome so I want to add version number at the end of the font source string in styles.css.

这是我要转换的生成的CSS的一部分

Here is a part of the generated css I want to transform

  @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是时间戳或其他随机字符串，可以将文件与以前的版本区分开.

where someVersion is a timestamp or some other random string that will distinguish the file from its previous version.

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

I'm looking for a gulp plugin that will parse css and add "salt" at the end of the src string.

欢迎其他解决方案

推荐答案

我找到了利用此插件的解决方案 https://www.npmjs.com/package/gulp-modify-file .这是基本的gulp任务:它在文件内容中查找some-icons.woff2并将其替换为some-icons.woff2?v = timestamp

I've found a solution leveraging this plugin https://www.npmjs.com/package/gulp-modify-file. Here is the basic gulp task: it looks for some-icons.woff2 in the file content and replaces it with 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版本控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！