gulp-css-spriter は、CSS コード内のスライスされた画像をスプライトにマージします image_html/css_WEB-ITnose

pNPM アドレス: https://www.npmjs.com/package/gulp-css-spriter/

minifyCSS = require('gulp-minify-css'),
スプリッター = require('gulp-css-spriter');

gulp.task('css', function() {

var timestamp =+new date（; sheet '：' ./dist/images/sprite'+timestamp+'.png '、
pathtospritesheetfromcss'： '../images/sprite'+timestamp+'.png'
。;
}} );

ヒント:

gulp-css-spriter は、デフォルトでスタイル ファイル内のすべての背景/背景画像画像をマージします

しかし、実際のプロジェクトでは、すべての画像がマージされるわけではありません。マージする必要があります。

background-image: url(../slice/p1-3.png?__spriter);//?__spriter サフィックスとマージ

background-image: url(../slice/p-cao1.png) ; //マージしないでください

必要に応じて、次のファイルをマージするように変更します。

node_modulesgulp-css-spriterlibmap-over-styles-and-transform-b​​ackground-image-declarations.js

48 行目以降の if-else if コード ブロックを次のコードに置き換えます。

には URL がありますURL に?__spriter サフィックスが付いているかどうかを確認します

if(transformedDeclaration.property === 'background-image' && /?__spriter/i.test(transformedDeclaration.value)) {

transformedDeclaration.value = transformedDeclar ation.value.replace('?__spriter','') ;
return cb(transformedDeclaration, declarationIndex, declarations);

// Background は 短縮プロパティ なので、`url()` がそこにあることを確認し、url の有無を判断してください?__spriter后缀
else if(transformedDec laration.property === 'background' && /?__spriter/i.test (transformedDeclaration.value)) {

transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);

if(hasImageValue) {
return cb(transformedDeclaration, declarationIndex, declarations);
}
}

如图：

执行效果：