file src versioning in gulp generated file

问题

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.

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');
  }

The desired output is

  @font-face {
        font-family: "some-icons";
        url('/assets/fonts/some-icons.woff2?v=someVersion') format('woff2');
      }

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

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

Other solutions are welcomed

回答1:

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'))
});

来源：https://stackoverflow.com/questions/41222788/file-src-versioning-in-gulp-generated-file