grunt压缩雪碧图

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 - 通过模板的选项

grunt压缩雪碧图相关推荐

使用Grunt生成雪碧图
1.Grunt是基于 Node.js 的项目构建工具,所以使用Grunt之前必须先安装好node.js和npm包管理器 2.全局安装Grunt的命令行支持,安装完之后,命令提示符中将会识别grunt命 ...
grunt 打包雪碧图 grunt-spritesmith
安装 npm install grunt-spritesmith --save-dev module.exports = function (grunt) {// Configure gruntgru ...
gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本安装完nodejs后,在命令行中(window + r 输 ...
前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
雪碧图工具sprity（20151201更新修复了同时合并多张图的bug）
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最 ...
雪碧图sprity 合并多图使用心得
介绍 sprity 是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择. ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
CSS-sprit 雪碧图
CSS-sprit 雪碧图可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示响应的图片这样图片会同时加载到网页中就可以避免出现闪烁的问题这个技术 ...

grunt压缩雪碧图

grunt 打包雪碧图

一下是一些高级用法，如需了解，移步官网 https://github.com/Ensighten/grunt-spritesmith

grunt压缩雪碧图相关推荐

最新文章

热门文章