angular中合成雪碧图的笨办法

1、添加gulpfile.js文件,编辑合成sprite的代码。

angular中合成雪碧图的笨办法_第1张图片
注意:图片路径和当前gulp的路径。

2、在gulpfile.js所在目录下,运行gulp命令,在你所需要合成图片的目录下生成sprite.png和sprite.css。

angular中合成雪碧图的笨办法_第2张图片
注意:理清楚gulpfile.js地址、图片地址、生成图片和css地址。

3、多个图片文件夹一次依此按照上面步骤,修改地址,在不同目录下生成sprite.png和sprite.css。

angular中合成雪碧图的笨办法_第3张图片
tips:可以删除已合成的小图标。

4、将所有sprite.css的代码拷贝到icon.less中。

angular中合成雪碧图的笨办法_第4张图片
tips:不用的sprite.css也可以删除了。

5、需要用的时候,@import icon.less 即可直接引用图表css函数。

angular中合成雪碧图的笨办法_第5张图片

你可能感兴趣的:(angular中合成雪碧图的笨办法)