npm 包 sprity-css-rollover 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，图片资源的制备是必不可少的一个环节。常常我们需要制作一系列的样式图表，并以不同的状态来呈现不同的样式，比如说鼠标悬停时的样式、选中时的样式等等。而手动去编辑这些样式，不仅费时费力，而且在维护上也非常复杂。这时，就需要使用到一款插件——sprity-css-rollover。

什么是 sprity-css-rollover

sprity-css-rollover 是一款帮助你快速生成基于 CSS 的精灵图的 npm 包，它还支持生成鼠标悬停时的样式和选中时的样式等。sprity-css-rollover 可以将我们提供的原始图片，快速生成雪碧图，并且根据我们提供的配置，为雪碧图自动生成 CSS 样式，让开发者在实现图片功能时更加方便快捷。

sprity-css-rollover 的安装

想要使用 sprity-css-rollover 进行精灵图的制作，首先需要对其进行安装，方法如下：

npm install sprity-css-rollover --save-dev

sprity-css-rollover 的使用

安装完成后，我们就可以着手开始使用 sprity-css-rollover 进行精灵图的制作了。这里有一个样例文件夹

└── images
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    └── 5.png

1.命令行方式

命令行方式使用 sprity-css-rollover 生成精灵图，命令如下：

npx sprity images sprites --css image.css --rollover

其中：

images 表示我们需要生成精灵图的文件夹的路径；
sprites 表示生成的精灵图输出的地址；
--css image.css 表示生成的 CSS 样式的输出地址，这里输出的是 image.css 文件；
--rollover 表示要生成鼠标悬停、选中样式，使用时无需多加任何代码。

2.配置方式

除了上述命令行方式，我们还可以在项目的 package.json 文件里的 scripts 字段中定义配置，通过 npm run 运行脚本，生成精灵图和 CSS 样式文件。

在项目 package.json 文件中添加如下内容：

{
  "scripts": {
    "sprites": "sprity images sprites --css image.css --rollover"
  }
}

运行脚本如下：

npm run sprites

sprity-css-rollover 的配置

设置 sprity-css-rollover 的参数是制作成功的关键，下面让我们来看看 sprity-css-rollover 的参数以及他们的作用。

命令行参数

输出的配置都可以在 sprity-css-rollover 的命令行参数中配置，在命令行中添加参数即可。

比如：当我们需要设置原始图片的位置时，可以在命令行中使用 --src 参数。如下是常用的参数。

参数名称	作用
--src	源文件路径
--style	指定生成 CSS 样式的文件
--prefix	CSS 类名前缀，默认是 sprity-css
--process	样式处理器，默认是 css
--rollover	是否生成鼠标悬停和选中时的样式

配置文件参数

除了命令行参数外，还可以通过配置文件来设置参数。配置文件的路径默认为当前路径下的 sprity.json 文件。

参数名称	作用
src	源文件路径
dest	生成的文件夹路径
style	生成 CSS 样式的文件
margin	图标按顺序排列时，每个图标之间的间距
prefix	CSS 类名前缀，默认是 sprity-css
process	样式处理器，默认是 css
orientation	图标按照横向或纵向排列，默认是 vertical
template	自定义 CSS 样式模板
dimension	是否生成尺寸信息的样式，默认是 false
spriteName	生成的精灵图的名称
splittedCssName	生成的 CSS 样式名称，带有鼠标悬停和选中样式
width	图标宽度，只有在 dimension = true 时有效
height	图标高度，只有在 dimension = true 时有效
background-color	精灵图的背景色，只有在 dimension = true 时有效
background-image	精灵图的图片地址，只有在 dimension = true 时有效
repeated-css	是否开启精灵图自动重复复制
generate-inline-sourcemap	是否生成行内 sourcemap

示例代码

这里有一个完整的 sprity-css-rollover 的示例代码：

-- -------------------- ---- -------
-
  ------ --------------------------
  ------- ---------
  -------- ---------------
  --------- ---------
  ------------ -------
  --------------- -----
  --------- --
  ------------------- --------------
  ------------------- ---------------------
  -------------- -----------
  -------- -------
  --------- -------
  ---------------------------- ------
  ----------- -
    ------ ----------------------
  -
-

以上示例中的代码，可以通过以下命令生成。

npx sprity -c ./sprity.json

之后，可以在 dest 文件夹下看到生成的图片和 CSS 样式文件，其中生成的图片为 sprites.png，CSS 样式文件为 sprite.css。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111f001