前端开发中，我们需要处理很多的图片文件，尤其是在设计图给出的时候，我们需要将一张大的图片切割成多个小的图片，并按需加载，以提高页面性能。常见的做法是使用 CSS sprite 技术，将多张图片合并成一张，通过更改 background-position 来显示对应的图片部分。而 broccoli-sprite 正是针对 CSS sprite 技术的 npm 包。
什么是 broccoli-sprite？
broccoli-sprite 是一个基于 broccoli 的 npm 包，能够将多张图片合成一张雪碧图，并且会生成对应的 CSS 文件。其中，雪碧图的大小可以根据需求进行配置，支持智能合并相同大小图片，并且能够按需加载单张图片。
因此，如果我们需要在开发过程中使用 CSS sprite 技术，并且希望方便地集成到构建过程中，则 broccoli-sprite 是一个不错的选择。
如何安装并使用 broccoli-sprite？
我们可以使用 npm 进行安装，安装命令如下：
$ npm install broccoli-sprite --save-dev
安装完成后，我们可以在项目中创建 broccoli 的示例，在示例中使用 broccoli-sprite 进行图片的处理。以下是简单的使用示例：
-- -------------------- ---- ------- ----- ------- - -------------------------- ----- ---- - --------------- ----- ---------- - ------------------- ------- ----- ---------- - ------------------- - ----------- ----------------- --------------- --------------------- ----------- ------- ------------ -------- --------------- -------- -------- ----------------- ----- --------------- ----- -- -------------- - ----------
在上述代码中，我们首先引入了 broccoli-sprite，然后指定了需要处理的图片文件夹路径（这里是 icon 文件夹）。该示例代码会将 icon 文件夹下的所有图片进行处理，生成雪碧图并对应的 CSS 文件，保存到 assets 目录下面。
下面解释一下主要参数：
spritePath：需要处理的图片文件夹路径，可以是相对路径或者绝对路径。spritePath：生成的雪碧图保存路径。stylesheetPath：生成的 CSS 文件保存路径。stylesheet：生成的 CSS 文件格式，可以是scss或css。styleSuffix：生成的 CSS 文件后缀名。retainedShapes：保留的图片格式。outputDimensions：是否在生成的 CSS 文件中输出图片宽高。outputGeometry：是否在生成的 CSS 文件中输出图片在雪碧图中的位置。
broccoli-sprite 的详细配置
除了示例中提到的参数，broccoli-sprite 还有很多详细的配置项。下面我们来逐一介绍：
参照宽度
图片的大小是我们需要关心的问题之一，而 broccoli-sprite 也提供了相关配置。我们可以通过 referenceWidth 指定参照宽度来控制图片的大小。如果我们将 referenceWidth 设置为 100px，则会将所有图片按照指定比例进行缩放。
const spriteTree = sprites(spritePath, {
spritePath: 'assets/sprites',
stylesheetPath: 'assets/scss/sprites',
referenceWidth: 100,
})合成算法
broccoli-sprite 提供不同的合成算法。不同算法的优劣取决于图片的数量和大小。以下是可以使用的算法：
growingGroup: 11 = 1024topDown: 5 = 32leftRight: 4 = 16diagonal: 3 = 8alt-diagonal: 2 = 4binary-tree: 1 = 2vertical: 0 = 1horizontal: -1 = 0
const spriteTree = sprites(spritePath, {
spritePath: 'assets/sprites',
stylesheetPath: 'assets/scss/sprites',
algorithm: 'vertical',
})图片缩放
对于某些图片，我们需要对其进行缩放处理。broccoli-sprite 提供了 imageScale 参数来控制图片的缩放比例。
const spriteTree = sprites(spritePath, {
spritePath: 'assets/sprites',
stylesheetPath: 'assets/scss/sprites',
imageScale: [0.5, 1],
})输出类型
broccoli-sprite 默认会生成两种类型的文件：雪碧图和 CSS。如果我们需要生成其他类型的文件，则可以通过以下配置来实现。
spriteGenerator：指定生成雪碧图的类型。stylesheetGenerator：指定生成 CSS 文件的类型。
// 生成 json 格式的雪碧图文件
const CustomSprite = require('svg-sprite')
const spriteTree = sprites(spritePath, {
spritePath: 'assets/sprites',
stylesheetPath: 'assets/scss/sprites',
spriteGenerator: CustomSprite,
})图片过滤
broccoli-sprite 默认会处理指定文件夹下的所有图片，但有时候我们并不需要处理全部图片。在这种情况下，我们需要定义一个 filter 函数，函数的返回值决定该图片是否需要处理。
const spriteTree = sprites(spritePath, {
spritePath: 'assets/sprites',
stylesheetPath: 'assets/scss/sprites',
filter: function(relativePath) {
return relativePath.endsWith('.png')
},
})总结
在前端开发过程中，图片处理是我们经常面临的问题之一。CSS sprite 技术的使用可以减少 HTTP 请求次数，优化性能，而 broccoli-sprite 这个 npm 包能够非常好地解决图片处理的问题。我们可以配置所需的参数，轻松地对图片文件夹进行处理，并集成到构建过程中。
在使用 broccoli-sprite 进行开发时，我们需要注意如下几点：
根据需求配置参数，以免生成的文件过大或过小。
需要使用的插件等文件必须安装到本地项目中。
broccoli-sprite 支持的图片格式有限，需要根据实际情况进行过滤和处理。
以上，就是 broccoli-sprite 的详细使用教程。祝大家在开发过程中能够得心应手，轻松处理图片问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5121