nodejs--执行系统命令或shell脚本,自动化完成TexturePacker的css sprite或cocos2d图片合并

nodejs执行系统指令能使我们有能力在js文件中使用系统命令行完成我多我们想做的事情。css精灵图合并是提高前端性能,减少服务器请求的不可少的一步，有很多工具可供我们使用，TexturePacker很多人都听过也用过，是我个人认为图片合并最专业的工具，没有之一。不管是css sprite拼图还是cocos2d或者flash（已更名animate CC）游戏的createjs的拼图，都非常方便。工具不再赘述，官网https://www.codeandweb.com/te...。

其实前端自动化流程中有一些css精灵图合并的插件，比如css-sprite(现在好像改名sprity了)，node模块，gulp和grunt插件版本都有。但因为项目中常会有使用createjs或者cocos2d做些项目，这两个合图一般是json或者plish的文件格式，css合并不适用。

TexturePacker在合图上够专业并提供了CLI的命令行方式，就想着如果用node调用他的命令行command line，就可以用文件搞定了（虽说打开这个软件GUI拖图片也挺方便的，但打开，拖图，点击生成这几个步骤若有多个合并或者可能要修改，可能就要个几分钟至10几分钟不等了）。如果用一个node文件搞定这些仅需几秒钟，是不是感觉效率瞬间提高了，好了废话不多说，搞起。

完成这样的自动化有几个问题需要解决：

• node执行系统指令，或者CLI命令行，或者shell等脚本文件

• TexturePacker的command line使用

• node调用command line完成我们的自动化逻辑

node执行系统命令

nodejs中调用系统命令或文件使用的是子进程，即我们经常见到的child_process,它提供了几个方法：

//生成子进程
child_process.spawn(command[, args][, options])

//直接执行系统指令
child_process.exec(command[, options][, callback])

//调用脚本文件
child_process.execFile(file[, args][, options][, callback])

首先实现node执行系统指令的功能

var exec = require('child_process').exec;

//需要执行的命令字符串
var cli = 'ipconfig';

exec(cli,{encoding:'utf8'},function (err,stdout,stderr){
    if (err){
        console.log(err);
        return;
    }
    console.log('stdout'+stdout);
    console.log('stderr'+stderr);
})

好，现在我们要将项目目录下images/pack里面的图片进行合并

var exec = require('child_process').exec;

var src = __dirname+'/images/pack';

//TexturePacker的指令字符串
var cli = 'TexturePacker --data pack.css --sheet pack.png '+src+' --png-opt-level 0 --max-width 2048 --max-height 2048';

exec(cli,{encoding:'utf8'},function (err,stdout,stderr){
    if (err){
        console.log(err);
        return;
    }
    console.log('stdout:'+stdout);
    console.log('stderr:'+stderr);
});

执行node pack.js即可完成node文件操作系统命令行指令。
注：关于TexturePacker的commandline用法可看官方文档https://www.codeandweb.com/te...

node执行脚本文件

如果需要将处理的指令单独成一个文件，方便管理，可以将指令相关的写在一个文件中，方便项目的修改与管理，需要用到子进程的execFile方法。

比如我们建一个pack.bat文件当然也可以建.cmd或者其他shell脚本

//pack.bat文件内容
TexturePacker --data pack.css --sheet pack.png %cd%\images\pack --png-opt-level 0 --max-width 2048 --max-height 2048

commandline.js如下

var execFile = require('child_process').execFile;

execFile('pack.bat',{encoding:'utf8'},function (err,stdout,stderr){
    if (err){
        console.log(err);
        return;
    }
    console.log('stdout:'+stdout);
    console.log('stderr:'+stderr);
});

node执行node commandline.js即可完成node对脚本文件的操作

这样我们重复的图片拖拽或者复制类似的工作，或者需要多个文件夹同时操作即可瞬间完成，又可以节省很多时间啦，是不是感觉挺爽！！！