gulp-spriteversion
v1.1.3
Published
Takes your files, updates image names with a hash based on a function and updates all references in other files
Downloads
100
Maintainers
Readme
gulp-spriteversion
Versions your static assests based on their content and updates all references to them in other passed files.
sprite.png
→sprite.png?v=e59ace00a5
sprite.css
.icon-sprite1 {
background-image: url(sprite.png?v=e59ace00a5);
background-position: 0px 0px;
width: 32px;
height: 32px;
}
This was written because spritesmith generates a new image and new css from the input images. Spritesmash will take each image hash the contents and update the name and replace all usages in the given file types allowing the sprite image to be busted if it has changed.
Install
$ npm install --save-dev gulp-spriteversion
Usage
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var buffer = require('gulp-buffer');
var spriteversion = require('gulp-spriteversion');
var spritesmithMulti = require('gulp.spritesmith-multi');
var buffer = require('gulp-buffer');
var hydra = require('gulp-hydra');
gulp.task('default', function () {
return gulp.src('src/images/*.{png}')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
}))
.pipe(spriteversion())
.pipe(gulp.dest('dist'));
});
gulp.task('multi-sprite', function () {
let spriteData = gulp.src('src/images/*.{png}')
.pipe(spritesmithMulti({
spritesmith (options, sprite) {
options.cssName = `sprite-${sprite}.less`;
options.cssSpritesheetName = `sprite-${sprite}`;
options.imgPath = `../images/styleimg/${options.imgName}`;
options.cssTemplate = spritesmithMulti.util.createTemplate(
path.join(__dirname, 'sprite.less.hbs'),[function (data) {}, spritesmithMulti.util.addPseudoClass]
);
}
}));
.pipe(buffer())
.pipe(spriteversion())
.pipe(hydra({
img: {type: 'ext', filter: ['png', 'jpg']},
css: {type: 'ext', filter: '.less'}
}));
});
API
spritesmash([options])
options
updateFormats
Type: array
Default: []
Array of extra file types to update filenames with
content hash. These should be provided without .
revisionFormats
Type: array
Default: []
Array of extra file types to update content with
renamed files. These should be provided without .
hashFunction
Type: string|function(filePath, content)
Default: MD5
Function type (MD5
, SHA1
, Timestamp
) or a function
which returns new file name for given content and file
path.
Original path
Original file paths are stored at file.originalName
. This
could come in handy for things like rewriting references to
the assets.