前言
在前端开发过程中，我们经常需要使用精灵图来减小网页加载时间，gulp.spritesmith 是一款用于生成精灵图的插件，并且它提供了自动合成样式文件的能力。gulp.spritesmith 非常易用，而且兼容多种引擎。
安装
你可以使用以下命令安装 gulp.spritesmith 插件：
$ npm install --save-dev gulp.spritesmith
使用步骤
- 在项目目录下创建一个 images 目录，并且将需要合成的图片放在 images 目录中。注意，所有的图片必须是同样的尺寸。
- 在项目目录下创建一个 gulpfile.js 文件，并引入 gulp 和 gulp.spritesmith。
var gulp = require('gulp'),
spritesmith = require('gulp.spritesmith');- 编写 gulp 任务。
-- -------------------- ---- -------
------------------- ---------- -
--- ---------- -
----------------------
-------------------
-------- -------------
-------- ------------
----
----------------------------------------
----------------------------------------
---在上面的例子中，我们指定了合成后的精灵图的名字为 sprite.png，并把 css 文件名命名为 sprite.css。gulp.spritesmith 插件提供了非常灵活的配置选项，你可以在官网查看全部可用的选项。
- 运行 gulp 任务。 在命令行中输入以下命令即可运行 gulp 任务：
$ gulp sprite
或者使用默认任务：
gulp.task('default', ['sprite']);示例代码
-- -------------------- ---- -------
--- ---- - ----------------
--- ----------- - ----------------------------
------------------- -------- -- -
--- ---------- - ----------------------
-------------------
-------- -------------
-------- ------------
----
----------------------------------------
----------------------------------------
---总结
gulp.spritesmith 插件非常易用，它帮助我们快速生成精灵图，并且自动生成样式文件，可以大大减少我们的工作量。它非常适合多种类型的项目，包括前端、移动端、桌面端等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79219