hugh 的个人博客

1、spritesmith

用与将图片合并到一张大图，并整理相关属性

npm install --save spritesmith

 

Spritesmith.run({
          src: imgsrc // 图片目录地址
        }, function handleResult(err, result) {
          // If there was an error, throw it
          if (err) {
            throw err;
          }
          console.log(result.coordinates)
})

2、spritesheet-templates

将spritesmith生成的属性按模板组合成相应的文件内容

npm install --save spritesheet-templates

templater({
              sprites: result.coordinates,
              spritesheet: {
                width: result.properties.width / 2,
                height: result.properties.height / 2,
                image: ""//用户访问时的图片路径
              },
              spritesheet_info: {
                name: filedir+"-st-1x"
              }
            }, {format: 'less'}) //format 使用哪种css语法

3、mkdirp

一个扩展的文件创建

4、gm

图片变换，用于支持retina屏的配置，将2x图变换成1x图

 

5、基本实现

Spritesmith.run({
          src: result
        }, function handleResult(err, result) {
          // If there was an error, throw it
          if (err) {
            throw err;
          }
          console.log(result.coordinates)
          var transCoordinates = [];
          var spriteTransCoordinates = [];
          for (var i in result.coordinates) {
            var curCoor = filedir + "_" + getFileName(i);
            result.coordinates[i]["name"] = curCoor + "_@2x"
            transCoordinates.push(result.coordinates[i]);
            spriteTransCoordinates.push({
              name: curCoor + "_@1x",
              x: result.coordinates[i].x / 2,
              y: result.coordinates[i].y / 2,
              width: result.coordinates[i].width / 2,
              height: result.coordinates[i].height / 2
            })
          }
          var md5Sign = md5(result.image);
          fs.writeFileSync(path.resolve(imageOutput + '/' + filedir + '_sprite@2x_'+md5Sign+'.png'), result.image);
      imageMagick(imageOutput + '/' + filedir + '_sprite@2x_'+md5Sign+'.png').resize(result.properties.width / 2, result.properties.height / 2, "!").autoOrient().write(imageOutput + '/' + filedir + '_sprite@1x_'+md5Sign+'.png', function (err) {
        if (err) {
          console.log(err);
          return;
        }
        var css = templater({
          sprites: spriteTransCoordinates,
          spritesheet: {
            width: result.properties.width / 2,
            height: result.properties.height / 2,
            image: spriteImageUrl + "/" + filedir + "_sprite@1x_"+md5Sign+".png"
          },
          spritesheet_info: {
            name: filedir+"-st-1x"
          }
        }, {format: 'less'})

        fs.writeFileSync(cssOutput + '/' + filedir + '_sprite@1x.less', css);
        var css2 = templater({
          sprites: transCoordinates,
          spritesheet: {
            width: result.properties.width,
            height: result.properties.height,
            image: spriteImageUrl + "/" + filedir + "_sprite@2x_"+md5Sign+".png"
          },
          spritesheet_info: {
            name: filedir+"-st-2x"
          }
        }, {format: 'less'})

        fs.writeFileSync(cssOutput + '/' + filedir + '_sprite@2x.less', css2);

        // 更新
        generaLessFile(cssOutput)

        if (success && typeof success == "function") {
          success();
        }
      });
    });</pre>