gulp.spritesmith

Posted 2021-04-08 一匹不羁的野马

    记得之前开发电商网站的时候，切图的时候都会先拿到PSD源文件后，自己手动合并雪碧图，然后还要调整css的background-position来定位，真的麻烦到死，如果设计图调整的时候，还要重新找回原图(合并后的图)并在原图的基础之上再添加新的图案。这样效率实在低下，而且很多都是无用工，应该交给工具来处理。

   gulp.spritesmith 这个工具就是解决前端程序员摆脱切图的烦恼，自己合并雪碧图并且生成对应的CSS样式。

   如何安装和使用呢？

   gulp.spritesmith这个插件依赖gulp，所以要先安装gulp

   

   通过npm install gulp gulp.spritesmith --save

   

   打开package.json

   

   

  安装完成后，编写gulpfile.js文件

   

 

  首先建立一个任务，然后指明要合并的图片路径，和生成后的图片名称和合并后的样式路径，统一输出路径放在dist

 

  先看一下项目的目录结构

   

  images下的图片

  配置完后，运行gulp sprite

  会生成dist文件夹

   

  打开看一下图片 sprite.png

打开sprite.css

这样就基本上完成了，生成的样式其实也可以自定义的，可以通过cssTemplate参数来写生成的css模板