在前端开发中，经常会遇到需要将多张图片合成一张 sprite 图片，以减小页面请求次数和加快页面加载速度的问题。gulp-css-img-sprite 就是一个非常方便的 npm 包，可以自动生成 sprite 图片和对应的 css 代码，省去手动合成和编写 css 的工作。
安装
使用 npm 安装 gulp-css-img-sprite：
npm install gulp-css-img-sprite --save-dev
使用方法
安装完成之后，在 gulpfile.js 中引入包：
var sprite = require('gulp-css-img-sprite');然后在 gulp 任务中添加以下代码：
-- -------------------- ---- -------
-------------------- -------- -- -
---------------------- ----------------
--------------
------------ ------------------------- ----- ------ ----
---------- ---------------------- ----- --- ----
------------ -------------------------- ---- --- -----------------------
---
----------------------
---执行该任务即可生成合成好的 sprite.png 和 sprite.css 文件。
参数说明
outputImage：生成的 sprite 图片路径outputCss：生成的 css 文件路径cssTemplate：指定 css 模版文件的路径，默认为主模版文件 css-template/sprites.cssselector：sprite 图片的 css 选择器，默认为.spritemargin：sprite 图片之间的间隔，默认为 5whiteSpace：每一行放置图片的空白处数量，默认为 1
自定义 css 模版
默认提供的模版文件 sprites.css 可能并不符合每个人的需求，所以我们可以自定义 css 模版。
首先，在根目录下创建一个 css-template 文件夹，并在里面创建 css 模版文件 sprites-template.css，然后修改 gulpfile.js 中的 cssTemplate，指向该文件：
-- -------------------- ---- -------
--- ------ - -------------------------------
-------------------- -------- -- -
---------------------- ----------------
--------------
------------ ------------------------- ----- ------ ----
---------- ---------------------- ----- --- ----
------------ ----------------------------------- ---- --- -------
---
----------------------
---然后在该文件中进行 css 样式的自定义，例如：
-- -------------------- ---- ------- -------- - -------- ------------- ----------- ------------------------- ---------- --------------- ------- - ------ - ------ ----- ------- ----- -------------------- ---- ----- - ------ - ------ ----- ------- ----- -------------------- ----- ----- -
其中，.sprites 是 sprite 图片的父元素样式，.icon1 和 .icon2 则是两个需要展示的子元素。
总结
npm 包 gulp-css-img-sprite 可以帮助我们快速自动生成 sprite 图片和对应的 css 代码，节省了手动合成和编写代码的时间成本。通过本文的介绍，大家可以掌握该 npm 包的使用方法和注意事项，并自定义 css 模版，使其更符合自己的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553b981e8991b448d0fc5