grunt压缩雪碧图
来源:互联网 发布:拉面说 知乎 编辑:程序博客网 时间:2024/04/29 23:24
grunt 打包雪碧图
- 插件
grunt-spritesmith
简易配置
// 项目配置(任务配置) grunt.initConfig({ // 读取我们的项目配置并存储到pkg属性中 pkg: grunt.file.readJSON('package.json'), // 自动雪碧图 sprite: { all: { src: 'src/slice/*.png', dest: 'src/css/spritesheet.png', destCss: 'src/css/sprites.css' } } }); // grunt.initConfig配置完毕 // 加载插件 grunt.loadNpmTasks('grunt-spritesmith'); // 自定义任务 grunt.registerTask('default', ['sprite']);
配置项
* src String|String[]
- 在spritesheet中用作精灵的图像
* 例如,这可以是一个glob sprites/*.png或一个文件数组[‘sprite1.png’, sprite2.png’]
* dest String
- 生成的spritesheet的输出位置
* 例如 path/to/output/spritesheet.png
* destCss String
- 生成的CSS的输出位置
* 例如 path/to/output/sprites.css
* imgPath String
- CSS中指定的spritesheet路径的可选覆盖
* 例如,如果../sprite.png给出,则CSS将具有:background-image: url(../sprite.png);
* padding Number
- 填充到精灵之间的右侧和底部
* 默认情况下没有填充
一下是一些高级用法,如需了解,移步官网 https://github.com/Ensighten/grunt-spritesmith
- algorithm
String
- 用于在spritesheet中定位精灵的算法- 默认情况下,这是binary-tree最好的包装
- algorithmOpts
Mixed
- 传递给算法的选项- 我们可以通过一些算法跳过排序 {algorithmOpts: {sort: false}}
- engine
String
- 引擎- 默认情况下,这是pixelsmith一个node基于引擎
- engineOpts
Object
- 通过引擎进行设置的选项- 例如phantomjssmith接受timeout通过{engineOpts: {timeout: 10000}}
- imgOpts
Object
- 通过出口引擎的选项- 例如通过gmsmith支持quality{imgOpts: {quality: 75}}
- cssFormat
String
- CSS格式使用 - cssTemplate
String|Function
- 用于渲染输出CSS的CSS模板 - cssHandlebarsHelpers
Object
- 帮助者注册到我们模板的 句柄的容器 - cssVarMap
Function
- 将每个文件名映射到CSS变量的函数 - cssSpritesheetName
String
- 在预处理器模板中用于spritesheet相关变量的名称 - cssOpts
Object
- 通过模板的选项
0 0
- grunt压缩雪碧图
- 使用grunt生成雪碧图
- grunt-spritesmith自动生成雪碧图
- gulp代码压缩和制作雪碧图
- grunt压缩
- 【gulp】JS文件的压缩混淆与雪碧图
- 雪碧图
- 雪碧图
- Grunt - imagemin图像压缩
- 初学grunt压缩
- 雪碧图/精灵图
- 疯狂的雪碧图
- 雪碧图以及冒泡
- 雪碧图-初识
- PS雪碧图快捷键
- CSS 雪碧图
- 雪碧图(css sprite)
- 0409 雪碧图
- 解决布局点击事件穿透的问题
- bzoj1103: [POI2007]大都市meg
- 狼性团队也需柔性管理
- 【C++】【LeetCode】【指针】2. Add Two Numbers
- 坐标轴标题设置
- grunt压缩雪碧图
- py-faster-rcnn编译过程中的问题记录
- Java基础学习笔记1
- CF 792A New Bus Route 排序,模拟
- 细说Linux下的粘滞位
- 重写hierarchy面板,实现创建Text自动添加content size fitter组件
- 区间k大数查询
- TensorflowOnSpark 介绍与搭建
- 通过注册表修改证书选项