Добавление версий в путь изображения Sprite

Я работаю над проектом, который переходит в новую версию, когда спрайт запуска стал грязным, и мне нужно дать версионность, чтобы проверить только последнее добавление, спрайт теперь используется только sprite.png и sprite-2x.png.

Но когда я генерирую с gulp css и gulp cssmin(gulp-minify-css), версия в sprite imagePath(sprite.png? V4=.1) исчезает (в style.css просто sprite.png без? V =4.1).

Это мой конфиг спрайта тоже создайте 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)));

Результат в 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', );

В Style.css

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

Это gulp css config // CSS задача (компилировать SASS, авторефиксировать и комбинировать медиазапросы)

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

Почему это потеряно? Есть ли другой путь?

Источник

1 ответ

Вы можете легко сделать это с:

Источник
Другие вопросы по тегам