Node.js 生成雪碧图

说明

采用开源库spritesmith进行雪碧图拼接，根据拼接结果，组装雪碧图JSON文件和CSS文件。

使用方式

太简单了，就不写了吧。。。

相关代码

入口文件index.js

var fs = require("fs");
var Spritesmith = require("spritesmith");
const OPTIONS = {
    outputDir: __dirname + "/output/",
    spriteImageName: "sprite_all.png",
    spriteImageJSON: "sprite_all.json",
    spriteImageCSS: "sprite_all.css",
    cssImagePrefix: "sprite_",
};

// 需要生成雪碧图的图片序列
var imageList = require("./images");

Spritesmith.run(
    {
        src: imageList.map((k) => k.url),
        engine: require("canvassmith"),
    },
    function handleResult(err, result) {
        if (err) {
            throw err;
        }

        // 雪碧图JSON文件信息
        var json = {};
        // 雪碧图CSS文件信息
        var cssLines = [];
        for (var url in result.coordinates) {
            var imageid = imageList.find((k) => k.url == url).id;

            var data = (json[imageid] = result.coordinates[url]);

            cssLines.push(
                `.${OPTIONS.cssImagePrefix}${imageid}{
                    width:${data.width}px;
                    height:${data.height}px;
                    background-image:url("${OPTIONS.spriteImageName}");
                    background-position: -${data.x}px -${data.y}px;
                    background-repeat: no-repeat;
                }`
            );
        }

        fs.mkdirSync(OPTIONS.outputDir, { recursive: true });
        // 保存雪碧图图片
        fs.writeFileSync(
            `${OPTIONS.outputDir}${OPTIONS.spriteImageName}`,
            result.image
        );

        // 保存雪碧图JSON文件
        fs.writeFileSync(
            `${OPTIONS.outputDir}${OPTIONS.spriteImageJSON}`,
            JSON.stringify(json, 0, 4)
        );
        // 保存雪碧图CSS文件
        fs.writeFileSync(
            `${OPTIONS.outputDir}${OPTIONS.spriteImageCSS}`,
            cssLines.join("\n")
        );
        console.log("finish");
    }
);

图片列表：images.js

module.exports = [
    { id: "address", url: "images/address.png" },
    { id: "adduser", url: "images/adduser.png" },
    { id: "answer", url: "images/answer.png" },
    { id: "diamond", url: "images/diamond.png" },
    { id: "gift", url: "images/gift.png" },
    { id: "pattern", url: "images/pattern.png" },
    { id: "question", url: "images/question.png" },
    { id: "setting", url: "images/setting.png" },
    { id: "start", url: "images/start.png" },
    { id: "ticket", url: "images/ticket.png" },
    { id: "time", url: "images/time.png" },
];

依赖：package.json

{
  "name": "spritemerge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "canvassmith": "^1.5.0",
    "fs": "0.0.1-security",
    "spritesmith": "^3.4.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}