雪碧图是一种将多个小图片合并成一张大图片的技术，可以减少浏览器请求次数和页面加载时间。但是手动合成雪碧图是一件费时费力的工作，而且容易出错。本文介绍使用 LESS 和 Gulp 实现雪碧图自动化合成的方法。
LESS
LESS 是一种 CSS 预处理器，可以让开发者使用类似编程语言的方式来编写 CSS。LESS 支持变量、嵌套、Mixin、函数等高级特性，可以大幅提高 CSS 的可维护性和可读性。
在 LESS 中，可以使用 @import 导入其他 LESS 文件，并使用 & 表示当前选择器的父级选择器。例如：
.button {
color: #fff;
background-color: #007bff;
&:hover {
background-color: #0069d9;
}
}上面的代码会编译成以下 CSS：
.button {
color: #fff;
background-color: #007bff;
}
.button:hover {
background-color: #0069d9;
}Gulp
Gulp 是一个基于流的自动化构建工具，可以自动化执行常见的开发任务，例如编译 LESS、压缩 JavaScript、优化图片等。Gulp 的核心概念是任务（Task）和流（Stream），一个任务接受一个或多个流作为输入，经过一系列的操作后输出一个或多个流。
Gulp 的基本用法如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ------------------ ---------- - -- ------ --- ------------------ ---------- - -- ------ --- -------------------- --------- ----------
上面的代码定义了两个任务 task1 和 task2，并将它们组合成一个默认任务。执行 gulp 命令时，默认任务会被执行。
实现雪碧图自动化合成
使用 LESS 和 Gulp 实现雪碧图自动化合成的步骤如下：
安装相关依赖：
npm install gulp gulp-less gulp-autoprefixer gulp-sourcemaps gulp.spritesmith --save-dev
gulp是 Gulp 的核心库；gulp-less是将 LESS 编译成 CSS 的插件；gulp-autoprefixer是自动添加 CSS 前缀的插件；gulp-sourcemaps是生成 CSS sourcemaps 的插件；gulp.spritesmith是生成雪碧图的插件。
创建 LESS 文件：
@import "sprite/*.less"; .icon { display: inline-block; background-image: sprite-url("sprite.png"); }上面的代码会导入
sprite目录下的所有 LESS 文件，并定义了一个.icon类，使用sprite-url函数指定了雪碧图的 URL。创建雪碧图模板文件：
<div class="icon icon-foo"></div> <div class="icon icon-bar"></div>
上面的代码定义了两个使用雪碧图的元素。
创建 Gulp 任务：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - --------------------- ----- ------------ - ----------------------------- ----- ---------- - --------------------------- ----- ----------- - ---------------------------- ----------------- ---------- - ------ -------------------------- ------------------------ ------------- --------------------- ---------------------------- ------------------------- --- ------------------- ---------- - ----- ---------- - ---------------------------- ------------------- -------- ------------- -------- -------------- ---------- -------------- -------- - ---- --------------------------------------- -------------------------------------- --- -------------------- -------- -----------上面的代码定义了两个任务
less和sprite，其中：less任务将 LESS 文件编译成 CSS，并添加前缀和 sourcemaps；sprite任务将src/sprite目录下的所有 PNG 图片合成雪碧图，并生成对应的 LESS 文件；- 默认任务先执行
less任务，再执行sprite任务。
运行 Gulp：
gulp
运行 Gulp 后，会在
dist目录下生成编译后的 CSS 文件和雪碧图文件。在 HTML 中使用.icon类和对应的子类即可使用雪碧图。
示例代码
完整的示例代码可以在以下仓库中找到：
https://github.com/luohao8023/gulp-sprites-example
总结
使用 LESS 和 Gulp 实现雪碧图自动化合成可以大幅提高开发效率和代码质量。LESS 的高级特性可以让开发者使用类似编程语言的方式编写 CSS，而 Gulp 的流式操作能力可以将常见的开发任务自动化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516801c95b1f8cacded2807