使用spritesmith将图片打包成雪碧图，并生成css文件

最新推荐文章于 2024-05-25 09:57:54 发布

jaqi.l

最新推荐文章于 2024-05-25 09:57:54 发布

阅读量147

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/ljq547152849/article/details/130849869

版权

安装依赖

pnpm install -g gulp
pnpm install gulp.spritesmith --save-dev

gulpfile.js

const gulp = require('gulp');
const spritesmith = require('gulp.spritesmith');


gulp.task('sprite', function () {
  const spriteData = gulp.src('images/*.png') // 将images目录下的所有PNG图像合并为一个雪碧图
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.css'
    }));
  return spriteData.pipe(gulp.dest('sprite')); // 并将其保存为sprite目录下,文件名为sprite.*
});

构建

gulp sprite    # 构建gulpfile.js下的sprite任务

构建物sprite.png,sprite.css

/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.icon-antOutline-safety@1x {
  background-image: url(sprite.png);
  background-position: -84px -75px;
  width: 64px;
  height: 64px;
}
.icon-close {
  background-image: url(sprite.png);
  background-position: -88px -159px;
  width: 27px;
  height: 27px;
}