---

Grunt-css-sprite 是一个用于生成 CSS 雪碧图的 Grunt 插件，它可以帮助前端工程师有效地管理网页中多个小图片资源，将它们合并成一张大图，并通过 CSS 的背景定位来显示需要的图片部分。下面我将详细阐述如何使用这个插件来创建 CSS 雪碧图。

安装 Grunt 和 grunt-css-sprite

确保你的开发环境已经安装了 Node.js 和 npm。然后，你可以通过以下步骤来安装 Grunt 和 grunt-css-sprite：

1. 在项目根目录下运行 npm init 命令，初始化 npm 项目。
2. 安装 Grunt：npm install grunt --save-dev。
3. 安装 grunt-css-sprite 插件：npm install grunt-css-sprite --save-dev。

配置 Gruntfile.js

接下来，你需要配置你的 Gruntfile.js 文件来使用 grunt-css-sprite 插件。

javascript module.exports = function { // 配置任务 grunt.config.set('css_sprite', { options: { // sprite 背景图源文件夹，只有匹配此路径才会处理 src: 'path/to/your/images', dest: 'path/to/your/sprites', imgName: 'sprite.png', cssName: 'sprite.css' }, files: { 'path/to/your/sprites/sprite.png': } });

// 加载插件 grunt.loadNpmTasks;

// 注册任务 grunt.registerTask; };

运行任务

配置完成后，你可以通过在命令行中运行以下命令来执行 css_sprite 任务：

bash grunt css_sprite

这将处理你指定的图片文件夹中的所有图片，并生成一个雪碧图文件和一个 CSS 文件。CSS 文件将包含必要的背景定位代码，以便在 HTML 中使用。

使用雪碧图

在你的 CSS 文件中，你可以像这样使用生成的雪碧图：

css .icon-home { background-image: url; background-position: 0 0; width: 20px; height: 20px; }

然后，在你的 HTML 中，你可以这样使用这个类：

这样，当浏览器加载页面时，它会显示雪碧图中的相应部分。

以上就是使用 grunt-css-sprite 插件创建 CSS 雪碧图的基本步骤。通过这种方式，你可以有效地管理和优化你的网页资源。