Gulp-css-spriter Sprite Chart synthesis

First, the configuration

After migrating from grunt to gulp, it was found that many features were not grunt so cool, but similar features supported, such as Sprite, slightly weaker, but also very good

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

Vargulp=require (' Gulp '),    minifycss=require (' gulp-minify-css '),    spriter=require (' Gulp-css-spriter ');

Second, gulp

Gulp.task (' CSS ', function () {    var timestamp = +new Date ();    Return Gulp.src (SRCPATH.CSS)        . Pipe (Spriter ({            //the location of the generated Spriter            ' spritesheet ': './web/images/sprite_ ' + timestamp+ '. png ',            //Generate style file picture reference address path            //as follows will be produced: Backgound:url (.. /images/sprite20324232.png)            ' pathtospritesheetfromcss ': '. /images/sprite_ ' +timestamp+ '. png ').        Pipe (MINIFYCSS ())        . Pipe (Autoprefixer ({            browsers:[') Last 2 Chrome versions ', ' Safari >0 ', ' Explorer >0 ', ' Edge >0 ', ' Opera >0 ', ' Firefox >=20 ',            cascade:f Alse,            remove:false,        })        . Pipe (Gulp.dest (DISTPATH.CSS));//Save the compressed file to the specified directory});

Third, CSS

. W{width:266px;height:78px;background:url (.. /images/w.png?__spriter) 0 0 no-repeat;}. J{width:270px;height:60px;background:url (.. /images/jd.png?__spriter) 0 0 no-repeat;}. T{width:290px;height:100px;background:url (.. /images/tmall.png) 0 0 no-repeat;}

Iv. Configuration

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-imagealwayshasaurl 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);
}
//backgroundisashorthandpropertysomakesure ' url () ' Isinthere and determine if URL has? __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);
}
}

Full picture

Not added? __spriter does not merge

Gulp-css-spriter Sprite Chart synthesis