How to use the gulp.spritesmith function in gulp

function runSpritesPC () {  /* PC端 */
    return gulp.src('./sprites/dev/*')
      .pipe(spritesmith({
        padding: 2, // 合并图间距
        algorithm: 'top-down', // 排列方式 ['binary-tree' | 'top-down' | 'left-right' | 'diagonal' | 'alt-diagonal']
        imgName: 'sprites.png', // 输出合并后图片
        cssTemplate: 'pc.handlebars', // 渲染输出css的模板文件
        cssName: 'sprites_pc.css' // 输出合并后样式（后缀为[.css | .sass | .scss | .less | .styl/.stylus | .json]）
      }))
      .pipe(gulp.dest('./sprites/release/'))
  },
  function runSpritesWAP () {  /* WAP端（rem+%） */

gulp.task('sprite', function spriteFn (done) {
  // Generate our spritesheet
  var spriteData = gulp.src('public/images/sprites/*.png')
    .pipe(gulpSpritesmith({
      retinaSrcFilter: 'public/images/sprites/*-2x.png',

      imgName: 'sprites.png',
      retinaImgName: 'sprites-2x.png',
      imgPath: '../images/sprites.png',
      retinaImgPath: '../images/sprites-2x.png',

      cssName: 'sprites-auto.scss',
      algorithm: 'alt-diagonal'
    }));

  // Output image stream and CSS stream to their respective folders
  var imgStream = spriteData.img
    .pipe(gulp.dest('public/images/'));
  var cssStream = spriteData.css
    .pipe(gulp.dest('public/css/base/'));

function runSpritesWAP () {  /* WAP端（rem+%） */
    return gulp.src('./sprites/dev/*')
      .pipe(spritesmith({
        padding: 2,
        algorithm: 'top-down',
        imgName: 'sprites.png',
        cssTemplate: 'wap.handlebars',
        cssName: 'sprites_wap.scss'
      }))
      .pipe(gulp.dest('./sprites/release/'))
  }
))

gulp.task('sprite-css', function(){
  var DEST_NAME = args[1];
  return  gulp.src(`${WATCH_SRC}/**/*.png`)
              .pipe(spritesmith({
                  imgName: DEST_NAME + '.png',
                  cssName: DEST_NAME + '.css',
                  imgPath: '../images/' + DEST_NAME + '.png'
              }))
              .pipe(gulpif('*.png', gulp.dest('images/')))
              .pipe(gulpif('*.css', gulp.dest('css/')));
});

function sprites() {
  const spriteData = gulp.src('./src/browser/assets/sprites/*')
    .pipe(plumber())
    .pipe(spritesmith({
      imgPath: '../assets/images/sprite.png',
      imgName: 'sprite.png',
      cssName: '_sprite.scss',
    }));

  const imgStream = spriteData.img
    .pipe(gulp.dest('./src/browser/assets/images'));

  const cssStream = spriteData.css
    .pipe(gulp.dest('./src/browser/css/core'));

  return mergestream(imgStream, cssStream);
}

function makeSprite(color, resolution){
    var suffix =  '-' + color + ((resolution) ? resolution : '');
    var sprite = gulp.src(paths.sprites['icons' + suffix])
        .pipe(spritesmith({
            imgName: 'icons' + suffix + '.png',
            cssName: '_sprite' + suffix + '.scss',
            cssTemplate: function(params){
                var output = '', e;
                for(var i in params.items){
                    e = params.items[i];
                    output += '$' + e.name + suffix + ': ' + e.px.offset_x + ' ' + e.px.offset_y + ';\n';
                }
                if(params.items.length > 0){
                    output += '\n\n';
                    output += '$sprite-height' + suffix + ': ' + params.items[0].px.total_height + ';\n';
                    output += '$sprite-width' + suffix + ': ' + params.items[0].px.total_width + ';\n';
                    output += '$icons' + suffix + ': "./images/icons' + suffix + '.png";';
                }

                return output;

gulp.task(tasks.sprites, done => {
	gulp.src(paths.images.sprites.source)
		.pipe(spritesmith({
			cssName: `generated-sprite.css`,
			imgName: 'generated-sprite.png'
		}))
		.pipe(gulp.dest(paths.images.sprites.buildTo))
		.on('end', _ => {
			gutil.log(gutil.colors.green(`\t[Sprite] Sprite image file has been generated`));
			gutil.log(gutil.colors.green(`\t[Sprite] Sprite SASS file has been generated`));
			gutil.log(gutil.colors.yellow(`\t[Sprite] Move and edit the ${paths.images.sprites.buildTo}/generated-sprite.css as you need`));
		});

	return done();
});

gulp.task('sprites', function () {
    return gulp.src('src/img/*.png')
        .pipe(spritesmith({
            imgName: 'sprites.png',
            cssName: 'sprites.css'
        }))
        .pipe(gulp.dest('dist/img/'));
});

gulp.task('bitmap-sprite', function () {
	var sprite = gulp.src(paths.sprite.bitmap + '**/*.png')
					.pipe(
						spritesmith({
							imgName: 'sprite.png',
							cssName: '_sprite.styl',
							imgPath: '../' + basePaths.images.dest + 'sprite.png',
							padding: 2,
							algorithm: 'top-down'
						})
					);

	sprite.img
		.pipe(imagemin())
		.pipe(gulp.dest(paths.images.dest));
	sprite.css
		.pipe(gulp.dest(paths.styles.src + 'helpers'))
		.pipe(notify({message: 'Sprite task complete'}));

	return sprite;