_接上篇:Compiler@NodeJS(一) – Web项目编译脚本_

直接切入主题吧。

PS:打个广告先,Compiler@NodeJS,Web开发、居家旅行、杀人越货之必备良药!

比较深入的用过linux的童鞋,一定记得这个“|”。它的使用方式是这样子的:cmd_a | cmd_b,意思是执行cmd_a 并且把cmd_a输出的结果,作为cmd_b的输入参数,传给cmd_b并执行它。例如我在shell中执行 top | grep node,就可以把进程名字包含node的进程的相关信息都找出来。如下:

_PS:top是实时显示进程状态的命令;grep是文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来。_

如上,管道可以把多个命令串联起来,只要这些命令都有输入输出,就能无限串联(理论上的……) !哇哈哈哈~~

嗯,回到compiler这里,看看是怎么来使用管道的。more

简单命令串联

假设这么一种情况:有个项目需要对用到的js文件进行合并,那么可以用下面的rule实现:

"all.js": {
    "cmd": "concat",
    "target": "js/all.js",
    "source": [
        "js/site/site.main.js",
                "js/site/site.tools.js",
                "js/site/site.share.js"
    ]
}

为了加快页面加载,还得对js进行压缩,那么,要如何实现了?很简单,直接把compres命令加在concat后面即可:

"all.js": {
    "cmd": "concat|compress",
    "target": "js/all.js",
    "source": [
        "js/site/site.main.js",
                "js/site/site.tools.js",
                "js/site/site.share.js"
    ]
}

结果就是,concat命令把三个js合并,并且把合并的结果文件传给compress进行压缩,这条规则最终输出了一个合并的并且压缩了的all.js。

如何,用法很强大很简单吧,只要是符合一定输入、输出规则(命令的规则后面再说)的命令,都可以无限串联。

并联的命令

又假设这么一种情况,有个项目用了iSpriter来创建精灵图,输出的css也希望压缩一下,可能会写这么个rule:

"ispriter": {
    "cmd": "ispriter|compress",
    "source": "style/",
    "target": "spriteout/"
}

执行的结果是精灵图合并了,css也修改并且压缩了,但是在spriteout目录下,却只有css文件,而没有精灵图。

这是因为compress只对css和js文件进行压缩,其他格式的文件都忽略。所以即使ispriter输出了css和图片,但是compress只处理了css并输出压缩后的css,图片则留在原地。所以还需要把图片也拷贝到spriteout目录下,这是我们就可以用到并联的命令了。

并联命令的写法是这样的:a|b,c。用逗号分割,这个命令组合的含义是:执行a,然后把a的输出按顺序传给b和c,并顺序执行b和c,b和c的输入都是同一个。应用到这个例子上,是这么写的:

"ispriter": {
    "cmd": "ispriter|copy,compress",
    "source": "style/",
    "target": "spriteout/"
}

这样就能先把ispriter的输出到拷贝到spriteout下面,然后把css压缩后也拷到spriteout覆盖原来的css。

命令参数怎么办

如果看过上一篇博文,那么你应该知道了每个cmd都是有一些可选参数的(params)。那么,当几个cmd串联的时候,参数该怎么写呢?

好了,不卖关子了,对于params,有这么个规则:

  1. 只有一个cmd的时候,params会被当作一个object,完整的传给cmd,而不管你把params配置成了啥([] or {});
  2. 多个cmd串联时(cmd0 | cmd1 | cmd2),params是个数组,会把params[0]传给cmd0,params[1]传给cmd1……以此类推;
  3. 多个cmd串联时(cmd0 | cmd1 | cmd2),params是个object,则先把params拷贝N份,N等于串联的cmd的个数,然后按规则2处理;
  4. 多个cmd**并联**时(cmd0 , cmd1, cmd2),如果params是个数组,按规则2处理;如果是个object,则按规则3处理;
  5. 多个cmd串联+并联时(cmd0 | cmd1, cmd2),先把“cmd1, cmd2”当成一个整体(cmd-1),整一条命令按照规则2和规则3处理;之后把并联的命令整体cmd-1按照规则4处理。

嘿嘿,晕了没有?看看例子吧:

"ispriter": {
    "cmd": "ispriter|compress",
    "params": {/*option*/}
}
//params是个object,相当于 ==>
"ispriter": {
    "cmd": "ispriter|compress",
    "params": [{/*option for ispriter*/},
        {/*option for compress*/} ]
}
"ispriter": {
    "cmd": "ispriter|copy,compress",
    "params": [//这是个数组哟
        {/*option for ispriter*/},
       [{/*option for copy*/},//注意: 因copy,compress是并联命令, 所以这里也是个数组
        {/*option for compress*/} ]
    ]
}

点击这里查看服务于真实项目的配置。

作为一个编译脚本,只有区区六个命令是远远不够的。然而各种项目纷纷扰扰,永远都有着层出不穷的特殊编译要求,靠一个或几个人要把覆盖到所有需求的脚本都写出来是不现实的。这时候,就需要各位程序猿自食其力,自己编写自定义命令了。

那么,怎么编写和添加自定义命令了?且待下回分解:《Compiler@NodeJS之自定义命令》。

Comments
Write a Comment

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟