转眼这一年又要到尾声了。想想这一年,貌似没干啥大事,却写了一堆杂七杂八的脚本,零零碎碎的。单个单个地用的时候是挺爽的,一旦跟已有项目结合起来的时候,由于之前的编译脚本是用python写的,没有灵活的插件机制,操作起来相当的不方便。就比如之前写的自动合图脚本(iSpriter),如果要在项目中加入,就得手动执行一次合图脚本,然后再执行python编译脚本。万一忘了合图,就会酿成发布事故。

因此,一直都在计划着用NodeJS实现一个编译脚本,可以方便的把以前写的一些脚本组合起来。于是抽了一些时间,整了这个编译脚本(compiler)。more

特性

其实世面上的编译脚本也有不少了,那么这个compiler有什么额外的功能呢?

  1. 强大的管道理念
  2. 插件化的脚本
  3. 简单的移植适配能力

不过暂时不说这些特性,先来看看怎么用这个脚本。

安装&配置

可以直接从npm安装:npm install compiler,或者直接从github上下载(https://github.com/iazrael/compiler),解压到合适的目录。

目前compiler内置了6个脚本:

  1. compress,可压缩js和css
  2. concat,合并文件
  3. copy,拷贝文件
  4. ioffline,生成离线应用的manifest,详见这里
  5. ispriter,自动合并sprite图,详见这里这里
  6. template-picker,模板提取脚本,详见这里

compiler使用json格式的配置文件,最基本的配置如下所示(以拷贝html为例):

{
    "sourceRoot": "./",//项目所在的目录,建议把config.json也放在项目的根目录

    "targetRoot": "./build",//编译后的输出目录

    "fileFormat": "js,css,html,htm,png,gif,jpg,jpeg,wav,json",//默认要处理的文件类型,也可以在每个rule里面填写

    "cmds": {},//可进行一些命令的组合,以及添加自定义命令

    "rules": {//rules 表示了所有编译规则,所有规则按定义顺序执行

        "copy_html": {//指定这条规则的id为“copy_html”,注意不要重复,否则会被覆盖

            "cmd": "copy",//指定要执行的命令,可以是命令的组合,也可以是自定义命令

            "source": "./",//这条规则的输入源,相对于sourceRoot,如果有多个输入源,可以换成数组类型

            "target": "./",//这条规则的输出,可以是文件名或路径,相对于targetRoot

            "params": {//要执行的命令的额外参数,多条命令进行组合的时候,可以换成数组类型

                "fileFormat": "html",//覆盖全局的fileFormat,只对 html 类型的文件做处理

                "recursive": false//指定是否递归
            }
        }
    }
}

其中最重要的属性就是rules,脚本要执行什么动作都是靠它来配置。如果有自己写的脚本想要使用compiler统一编译,可以在cmds中配置好,然后在rule中指定cmd即可。就跟下面这个示例一样:

{
    //……
    "cmds": {
        "translate": {
            "id": "translate",
            "root": "./custom_cmds/translate/"
        }
        },
    "rules": {
        "translate_html": {
            "cmd": "translate",
            "source": "./",
            "target": "./",
            "params": {
                //……
            }
        }
    }
}

如果某个命令(cmd)需要配置额外参数,可以写在params里面。params是个对象,所有值都会原封不动的传给cmd。每个命令有哪些额外参数,可以看看 compiler/cmds/对应命令/ 下面的 README.md,有相关的说明,例如这个

也可以点击这里查看一个完整编译脚本配置。

是不是很好奇translate这个命令是怎么写的?嘿嘿,别急,先看看怎么运行它。

运行

如果通过NPM安装的话,则要写个js来运行它:

var compiler = require('compiler');
compiler.compile('config.json');

然后在命令行运行:node run-compiler.js,如果想偷懒不想写个js,可以直接把代码写成一行:

node -e "require('compiler').compile('config.json')"

如果是下载了源代码,则可以用以下方式执行compiler
node ./compiler/ config.json
本来想做成想express那样,直接注册成全局命令来执行的(如:compiler config.json),不过还没去仔细看要咋弄,暂时先这样吧。

但是作为一个编译脚本,如果只是简单执行几个命令,根本是没有必要重复造个轮子的。别急,好戏还在后头呢,请看下回分解:《Compiler@NodeJS之强大的管道》。

Comments
Write a Comment
  • hongru reply

    顶啊,小龙,做了好多工具脚本。在你的项目的package.json里面就可以配置这个项目的独立命令<br>{<br>'bin':{<br> 'compiler': './src/compiler.js',<br>}<br>}

  • iAzrael reply

    @hongru WoW,我还以为要做什么复杂的逻辑,^_^

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   插入代码   动态   加速   模拟