gulp-sprite-all

"雪碧图构建类库"

Usage no npm install needed!

<script type="module">
  import gulpSpriteAll from 'https://cdn.skypack.dev/gulp-sprite-all';
</script>

README

gulp-sprite-all

Information

按目录合并生成雪碧图和Less样式文件

Usage

gulp = require('gulp')
SPA = require('gulp-sprite-all')
gulp.task 'sprite',(cb)->
    opts = 
        srcPath: path.join('./test','sprite')
        lessOutPath: path.join('./test','less/sprite')
        imgOutPath: path.join('./test','img/sprite')
    spCtrl = new SPA.init(opts) #初始化雪碧图构建实例
    spCtrl.output() #输出雪碧图构建结构

spa.init 为初始化接口,接受一个对象参数,带有3个属性,分别是:

  • opts.srcPath: 雪碧图源文件的根目录,目录下不同的文件夹,每个文件夹下存放一组的雪碧图源码
  • opts.lessOutPath: 构建生成的雪碧图对应less文件的输出目录
  • opts.imgOutPath: 构建生成的雪碧图文件输出目录

其他说明

  1. 任务构建完成后,会在 opts.srcPath 雪碧图源文件的根目录下生成一份雪碧图的源文件树结构map,名为"spmap.json"
  2. gulp-sprite-all 只支持less的预处理格式
  3. 雪碧图输出的图片和less文件的存储路径必须是相对位置为 '../img/sprite/icons.png'