Adding versioning in image path Sprite

Question

I'm working on project that move in new version, when launch sprite became messy and need to be given versioning to check the latest addition only, sprite used now only sprite.png and sprite-2x.png.

But when i generate with gulp css and gulp cssmin(gulp-minify-css), version in sprite imagePath(sprite.png?v4=.1) disappear (in style.css just sprite.png without ?v=4.1).

This is my sprite config too create sprite.png

// Sprites

var gulp          = require('gulp'),
config        = require('../config').sprite,

spritesmith   = require('gulp.spritesmith'),
gulpif        = require('gulp-if'),
merge         = require('merge-stream');

gulp.task('sprite', function() {
// Normal
var sprite = gulp.src(config.image + '/icons/*.png')
.pipe(spritesmith({
  imgName: 'sprite.png',
  imgPath: '../img/sprite.png?v=4.1',
  cssName: '_helper.spritemap.scss'
}))
.pipe(gulpif('*.png', gulp.dest(config.image), 
gulp.dest(config.sass)));
// Retina
var sprite2x = gulp.src(config.image + '/icons-2x/*.png')
.pipe(spritesmith({
  imgName: 'sprite-2x.png',
  imgPath: '../img/sprite-2x.png?v=4.1',
  cssName: '_helper.spritemap-2x.scss',
  cssVarMap: function(sprite) {
    sprite.name = sprite.name + '-2x';
  }
}))
.pipe(gulpif('*.png', gulp.dest(config.image), 
gulp.dest(config.sass)));

Result in spritemap scss:

$icon-kustom-white-name: 'icon-kustom-white';
$icon-kustom-white-x: 449px;
$icon-kustom-white-y: 265px;
$icon-kustom-white-offset-x: -449px;
$icon-kustom-white-offset-y: -265px;
$icon-kustom-white-width: 18px;
$icon-kustom-white-height: 21px;
$icon-kustom-white-total-width: 493px;
$icon-kustom-white-total-height: 483px;
$icon-kustom-white-image: '../img/sprite.png?v=4.1';
$icon-kustom-white: (449px, 265px, -449px, -265px, 18px, 21px, 493px, 
483px, '../img/sprite.png?v=4.1', 'icon-kustom-white', );

In Style.css

//Style.css
.example {
  background-image: url(../img/sprite.png); // Version missing (?v=4.1)
}

This is gulp css config // CSS task (compile SASS, autoprefixing, and combine media queries)

var gulp          = require('gulp'),
config        = require('../config').sass,

plumber       = require('gulp-plumber'),
changed       = require('gulp-changed'),
sass          = require('gulp-sass'),
postcss       = require('gulp-postcss'),
autoprefixer  = require('gulp-autoprefixer'),
mqpacker      = require('css-mqpacker'),
browserSync   = require('browser-sync'),
minifyCSS     = require('gulp-minify-css');
// filever       = require('gulp-version-filename');

gulp.task('css', function() {
return gulp.src(config.src)
.pipe(plumber({
  errorHandler: function(err) { console.log(err); this.emit('end') }
}))
.pipe(changed(config.dest, { extension: '.css' }))
.pipe(sass({
  imagePath: '../img',
  sourceComments: true,
  outputStyle: 'expanded'
}))
.pipe(postcss([ autoprefixer, mqpacker({sort: true}) ]))
.pipe(gulp.dest(config.dest))
.pipe(browserSync.reload({stream:true}));
});

gulp.task('cssmin', function() {
return gulp.src(config.src)
.pipe(plumber({
  errorHandler: function(err) { console.log(err); this.emit('end') }
}))
.pipe(sass({
  imagePath: '../img'
}))
.pipe(postcss([ autoprefixer, mqpacker({sort: true}) ]))
.pipe(minifyCSS())
.pipe(gulp.dest(config.dest));
});

Why is it lost? Is there any other way?

Answer 1

You can easily do it with:

• unix-timestamp: https://www.npmjs.com/package/unix-timestamp
• gulp-md5: https://www.npmjs.com/package/gulp-md5