在图像路径 Sprite 中添加版本控制

Question

我正在开发新版本的项目，当启动精灵变得混乱并且需要进行版本控制以仅检查最新添加时，精灵现在仅使用 sprite.png 和 sprite-2x.png。

但是当我使用 gulp css 和 gulp cssmin(gulp-minify-css) 生成时，精灵 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 配置 // 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));
});

为什么会丢失？ 有没有其他办法？

Answer 1

你可以很容易地做到这一点：

• unix 时间戳：https://www.npmjs.com/package/unix-timestamp
• gulp-md5：https://www.npmjs.com/package/gulp-md5