什么是雪碧图
精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。
常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。
优点：
体积小：把N多个小图标放到一张大图上去，通过整合图片来减少图片的体积；
请求次数少，打开速度更快：通过图片整合减少用户对服务器的请求次数，从而提高网站的优化速度。
使用 background属性
例如：background: #ccc url('/icon.png') no-repeat 0 -200px
补充background相关属性
background-color: red (等于 background:red)
background-image: url() 填充背景图片
background-repeat: no-repeat(不平铺)
前端如何制作合并精灵图（雪碧图）
方法一：这是一个在线生成工具
http://alloyteam.github.io/gopng/###
方法二：npm命令生成
1.首先电脑上要安装有 node.js
打开终端输入下npm -v可以查看是否安装（注意空格）
LiudeMac-Pro:~ liu$ npm -v
6.14.13 //已安装会显示这个node的版本号
2.使用spirit-cli命令合并所有图片为一张精灵图并生成代码
①全局安装spirit-cli插件
// 使用npm
npm install -g spirit-cli //报错的话，可以尝试前面加sudo,以管理员身份运行：sudo npm install -g spirit-cli
这里如果出现报错，
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules //没有读写权限
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
···
npm ERR! Error: EACCES: permission denied,//拒绝授权 access '/usr/local/lib/node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR! errno: -13,
报错显示没有权限，我们需要以管理员身份去运行，在前面加上sudo,如下图
sudo npm install -g spirit-cli
②使用命令 spirit 加上要合并的图片所在的文件夹路径
spirit + 空格+文件夹路径
// 使用npm
→ ~ lrachel$ spirit /Users/lrachel/Desktop/flag
开始检测路径： /Users/lrachel/Desktop/flag
检测到5个文件！
开始进行合并
合并完成后，你会发现在你之前创建的img文件夹下多了一个spirit-cli文件夹，文件夹里面有合并好的精灵图(雪碧图)和对应的CSS，到这里只需要前端引入.css文件样式直接调用就可以。
image.png
举一反三
网页中用到.jif动图的时候，总是会出现锯齿，那么，我们也可以采用雪碧图的方式，让多张图片连续滚动，实现动画效果，相当于序列帧图。
知识点补充
npm -v 检查是否安装npm
LiudeMac-Pro:~ liu$ cd desktop/文件夹名 //打开文件夹
LiudeMac-Pro:~ liu$ pwd
//
//全称“pathWord ” 查看当前打开的文件夹的完整路径
npm cache clean 缓存清理
sudo npm install npm -g
//表示以管理员身份运行，或是node已随附npm安装，因此您应该拥有的版本npm，但是npm更新的频率比更新的频率高node，因此您需要确保它是最新版本。不是太确定
常见报错
sudo下的npm无法升级-sudo npm -v 与 npm -v版本号是不一样的
参考解决方案 点击查看
什么是NPM
NPM名词解释：
npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、用JavaScript编写的软件包管理系统。
NPM说明
npm会随着Node.js自动安装[3]。npm模块仓库提供了一个名为“registry”的查询服务，用户可通过本地的npm命令下载并安装指定模块。此外用户也可以通过npm把自己设计的模块分发到registry上面[4]。
NPM使用
npm可以管理本地项目的所需模块并自动维护依赖情况，也可以管理全局安装的JavaScript工具。
如果一个项目中存在package.json文件，那么用户可以直接使用npm install命令自动安装和维护当前项目所需的所有模块。在package.json文件中，开发者可以指定每个依赖项的版本范围，这样既可以保证模块自动更新，又不会因为所需模块功能大幅变化导致项目出现问题。
开发者也可以选择将模块固定在某个版本之上。
什么是Node.js
Node.js 是能够在服务器端运行 JavaScript的[开放源代码、跨平台"开放源代码")运行环境。
Node.js 采用Google开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。
Node.js 大部分基本模块都用 JavaScript 语言编写。
在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上运行。Node.js 的出现使 JavaScript 也能用于服务端编程。
Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器运行。
网友评论