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对脚本文件的操作

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

你可能感兴趣的:(自动化构建工具,node.js)