在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置。即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带宽和资源。

雪碧图插件一般还支持快速引用小图标,例如当我们需要在html中放入service.png这张图片时,我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式,省去了繁琐的引入图片的样式编写,大大提升效率。

在Vue-cli 3.0项目中常用webpack-spritesmith进行相关配置,该插件的文档不太直观,并且文档中基于webpack,而vue-cli 3.0的配置是与webpack有所差异的。本文着眼于探讨基于vue-cli3.0项目的该插件的配置方法,使用vue-cli3.0的链式操作进行配置示例。

安装

npm i webpack-spritesmith

引入

const path = require('path');
 
const SpritesmithPlugin = require('webpack-spritesmith');

使用插件

const templateFunction = function(data) {
  var shared = ".icon { display: inline-block; vertical-align: middle; background-image: url(I) }".replace(
    "I",
    data.sprites[0].image
  );

  var perSprite = data.sprites
    .map(function(sprite) {
      return ".icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
        .replace("N", sprite.name)
        .replace("W", sprite.width)
        .replace("H", sprite.height)
        .replace("X", sprite.offset_x)
        .replace("Y", sprite.offset_y);
    })
    .join("\n");

  return shared + "\n" + perSprite;
};

module.exports = {
  chainWebpack: config => {
    // 将小图标拼接成雪碧图
    config.plugin("webpack-spritesmith").use(Spritesmith, [
      {
        src: {
          cwd: "./src/assets/images/icon/",
          glob: "*.png"
        },
        target: {
          image: "./src/assets/images/sprite/sprite.png",
          css: [
            [
              path.resolve(__dirname, "./src/assets/scss/icon/_sprite.scss"),
              {
                // 引用自己的模板
                format: "function_based_template"
              }
            ]
          ]
        },
        apiOptions: {
          cssImageRef: "../../images/sprite/sprite.png"
        },
        customTemplates: {
          function_based_template: templateFunction
        },
        spritesmithOptions: {
          algorithm: "binary-tree",
          padding: 10
        }
      }
    ]);
  }
}

参数说明

  • src 配置创建雪碧图的源文件
    – cwd 要创建雪碧图的源文件夹
    – glob 要创建雪碧图的源文件类型

即将src.cwd路径下的所有匹配src.glob的源文件生成雪碧图。以上案例中,./src/assets/images/icon/路径下的所有.png文件都会拼接到雪碧图。

  • target 配置生成的雪碧图文件
    – img 生成的雪碧图路径和文件名
    – css 引用生成的雪碧图的样式文件的路径和模板等配置

在上述案例中,生成的雪碧图的路径是../src/assets/images/sprite/sprite.png,生成的引用雪碧图的样式文件的路径是./src/assets/scss/icon/_sprite.scss,并且_sprite.scss中的内容在function_based_template中定义,而function_based_template则在customTemplates中定义。

  • apiOptions 可选,配置引用生成的雪碧图的一些细节

  – cssImageRef 配置在样式文件中引用雪碧图的路径

具体来说,虽然target.img已经配置好了生成的雪碧图路径,但是,生成的样式文件_sprite.scss中,还需要通过scss引用雪碧图,比如background-image: url(../../images/sprite/sprite.png),因此需要使用apiOptions.cssImageRef设置background-image引用雪碧图的路径。

  • customTemplates 可选,配置生成样式文件的样式模板

具体来说,我们在target.css选项中,将format设置为“function_based_template”,那么,最终生成的样式文件中的内容将是样式模板function_based_template定义的形式。function_based_template便需要在customTemplates 中定义。

以上案例中,function_based_template的值是templateFunction,那么将按templateFunction中的返回值生成样式内容。即生成的全是.icon {…} .icon-N{…}的形式。

案例中之所以这样设计,是为了方便直接在html中使用<i class='icon icon-N'></i>的形式,这样将直接加载出对应的图标,其中N是图标的名称。

  • spritesmithOptions 可选, spritesmith的配置。

spritesmith是另一个插件,webpack-spritesmith使用了spritesmith。spritesmithOptions 选项用来配置在spritesmith中可用的那些配置。

   – algorithm 配置生成雪碧图的算法。比如设为“binary-tree”,则雪碧图看起来正正方方,还可以设为top-down、left-right、diagonal、alt-diagonal,不同值之间拼接小图标的方式不同,因此最终的雪碧图形状不同。
   – padding 配置雪碧图中小图标之间的间距,可根据需要设置。

Logo

前往低代码交流专区

更多推荐