less实现小图自动合并大图

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。