Question

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

但是当我用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配置 // 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-timestamp：https://www.npmjs.com/package/unix-timestamp
gulp-md5：https://www.npmjs.com/package/gulp-md5

在图像路径Sprite

1 个答案: