less实现小图自动合并大图

时间：2015-05-11 12:32:42 阅读：118 评论：0 收藏：0 [点我收藏+]

标签：

1. 执行安装命令： cnpm install grunt-spritesmith --save-dev //在package.json里自动生成"grunt-spritesmith": "^4.6.0"

2. 查找配置文件：通过npm官网，找到geetting started配置文件，将代码sprite那段拷入grutefile.js文件

sprite:{

all: {

src: ‘path/to/your/sprites/*.png‘, //要合并的图片的路径，路径即为package.json里定义的<%= pkg.path %>

dest: ‘destination/of/spritesheet.png‘, //合并后的大图的摆放路径

destCss: ‘destination/of/sprites.css‘ //自动生成的图片的css或者less

　　 "algorithm":"top-down" //摆放图片的顺序，默认为从左到右

　　　"padding": 20, //图片与图片之间的间距

　　 "cssFormat": "less" //你希望保存的destCss的文件的格式

}

grunt.loadNpmTasks(‘grunt-spritesmith‘); //执行任务所必须的

grunt.registerTask(‘imageSprite‘, [‘sprite‘]); //名字可以自己取，但不可以取sprite，避免重复

例：

sprite: {
　　all: {
　　　　"src": ‘<%= pkg.path %>/images/icon/*.png‘,
　　　　"dest": ‘<%= pkg.path %>/dist/img/spritesheet.png‘,
　　　　"destCss": ‘<%= pkg.path %>/less/common/icon_sprite.less‘,
　　　　// "algorithm":"top-down"
　　　　"padding": 20,
　　　　"cssFormat": "less"
　　},
　　second: {
　　　　"src": ‘<%= pkg.path %>/images/*.png‘,
　　　　"dest": ‘<%= pkg.path %>/dist/img/2.png‘,
　　　　"destCss": ‘<%= pkg.path %>/less/common/icon_sprite_2.less‘,
　　　　// "algorithm":"top-down"
　　　　"padding": 20,
　　　　"cssFormat": "less"
　　},
}

grunt.loadNpmTasks(‘grunt-spritesmith‘);  
grunt.registerTask(‘imageSprite‘, [‘sprite‘]);

3. 执行命令： grunt imageSprite //注意在执行前需先退出less 的watch命令，或者重新打开一个命令窗口

它会自动合并图片到你设定的目录下，以你设定的名字为图片名字；自动生成less或css文件，以小图的名字为对应的class的名字。

4. 新建一个less文件icon.less，把自动生成的less文件插入进去，

@import "icon_sprite.less";

.sprites(@spritesheet-sprites);

到此只要在html中以同样的class命名，就可以定位图片了。

注：若要生成两个合并图，可以再写一个second。

less实现小图自动合并大图

标签：

原文地址：http://www.cnblogs.com/JolinChan/p/4493957.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行