grunt前端开发插件grunt-sprite

最新推荐文章于 2024-09-11 10:11:25 发布

曾经沧海难为水-除却巫山不是云

最新推荐文章于 2024-09-11 10:11:25 发布

阅读量1.3k

点赞数 1

分类专栏： grunt 文章标签： grunt

本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/42736831

版权

grunt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是什么

grunt-sprite 是一个 grunt 的前端开发插件。

能干什么

这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：

使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图
在原css代码中为切片添加background-position属性
生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码
在引用雪碧图的位置打上时间戳
在样式末尾追加时间戳

安装依赖

grunt-sprite 使用 spritesmith 作为内部核心算法，根据官方文档中提到的基本依赖，须要安装Graphics Magick(gm) 和 PhantomJS 两个依赖。

Graphics Magick(gm)

GraphicsMagick 为 grunt-sprite 提供用于图像处理的框架，安装方法：
- Mac
```
// 安装GM图形库    
brew install GraphicsMagick 
```
- Windows
  
  前往官方网站下载安装GM图形库
PhantomJS

PhantomJS 为 spritesmith 提供 CSS选择器与 JSON 的支持，安装方法：
- Mac
```
// 安装 Phantomjs
brew install phantomjs
```
- Windows
  
  前往官方网站下载安装Phantomjs

配置说明

// 自动雪碧图
  sprite: {
      allslice: {
          files: [
              {
                  //启用动态扩展
                  expand: true,
                  // css文件源的文件夹
                  cwd: 'css',
                  // 匹配规则
                  src: ['*.css'],
                  //导出css和sprite的路径地址
                  dest: 'tmp/',
                  // 导出的css名
                  ext: '.sprite.css'
              }
          ],
          options: {
              // 默认使用GM图像处理引擎
              'engine': 'gm',
              // 默认使用二叉树最优排列算法
              'algorithm': 'binary-tree',
              // 默认给雪碧图追加时间戳
              'imagestamp':true,
              // 默认给样式文件追加时间戳
              'cssstamp':true

          }
      }
  }

files

使用标准的动态文件对象

dest 指定一个输出的目录，将会在这个目录下创建一个css/和一个sprite/目录。
options
- engine
  
  必选项，指定图像处理引擎，选择gm
- algorithm
  
  必选项，指定排列方式，有top-down （从上至下）, left-right（从左至右）, diagonal（从左上至右下）, alt-diagonal （从左下至右上）和 binary-tree（二叉树排列）五种供选择。
- imagestamp
  
  可选项，是否要给雪碧图追加时间戳
- cssstamp
  
  可选项，是否给样式文件追加时间戳

载入插件

请不要忘了载入插件

grunt.loadNpmTasks('grunt-sprite');

打个比方

有一个类似这样的目录结构：

    ├── test                
        ├── css/    
            └── icon.css        
        ├── slice/  
                ├── icon-a.png
                ├── icon-a@2x.png       
                ├── icon-b.png
                └── icon-b@2x.png
        └── publish
            ├── css/
                └── icon.sprite.css
            └── sprite/     
                └── icon.png

css/icon.css 调用slice/目录下的切片，grunt-sprite 会将 css/icon.css 处理。

在publish/ 目录下生成 css/ 和 sprite/ 两个目录，css/ 目录下是处理完成的样式icon.sprite.css ，而 sprite/ 目录下是合并完成的雪碧图 icon.png。