Gulp-css-spriter merge sliced images from CSS code into sprite graphs

NPM Address: https://www.npmjs.com/package/gulp-css-spriter/

Configuration gulpfile.js:

var Gulp = require (' Gulp '),

Minifycss = require (' Gulp-minify-css '),
Spriter = require (' Gulp-css-spriter ');

Gulp.task (' CSS ',function() {

varTimestamp = +NewDate ();
//style files that need to automatically merge sprite charts
returnGulp.src ('./src/css/style.css ')
. Pipe (Spriter ({
//the location of the generated Spriter
' Spritesheet ': './dist/images/sprite ' +timestamp+ '. png ',
//generate the path to the style file picture reference address
//The following will be produced: Backgound:url (.. /images/sprite20324232.png)
' Pathtospritesheetfromcss ': '. /images/sprite ' +timestamp+ '. png '
}))
. Pipe (Minifycss ())
//Output Path
. Pipe (Gulp.dest ('./dist '));
});

Tips:

Gulp-css-spriter By default, all background/background-image images in the style file are merged,

But in the actual project, we are not all images that need to be merged.

Background-image:url (.. /slice/p1-3.png?__spriter);//A merger of __spriter suffixes

Background-image:url (.. /slice/p-cao1.png); Do not merge

Modify the following files to merge as needed.

node_modules\gulp-css-spriter\lib\ Map-over-styles-and-transform-background-image-declarations.js

48 lines start with the If-else if code block, replaced with the following code:

// background-image always have a URL and determine if URL has? __spriter suffix

if(Transformeddeclaration.property = = = ' Background-image ' &&/\?__spriter/i.test ( Transformeddeclaration.value)) {

Transformeddeclaration.value = TransformedDeclaration.value.replace ('? __spriter ', ');
returnCB (Transformeddeclaration, declarationindex, declarations);
}
//Background is a shorthand property so make sure ' url () ' was in there and determine if there is a URL? __spriter suffix
Elseif(Transformeddeclaration.property = = = ' Background ' &&/\?__spriter/i.test (transformeddeclaration.value)) {

Transformeddeclaration.value = TransformedDeclaration.value.replace ('? __spriter ', ');
varHasimagevalue = SpriterUtil.backgroundURLRegex.test (Transformeddeclaration.value);

if(Hasimagevalue) {
returnCB (Transformeddeclaration, declarationindex, declarations);
}
}

Execution effect:

Gulp-css-spriter merge sliced images from CSS code into sprite graphs