Compiler@NodeJS(一) – Web项目编译脚本

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

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

特性

其实世面上的编译脚本也有不少了,那么这个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之强大的管道》。

3 条评论
  1. hongru 回复

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

    • iAzrael 回复

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

  2. [...] 接上篇:Compiler@NodeJS(一) – Web项目编译脚本 [...]... imatlas.com/posts/nodejs-compiler-pipe

发表评论

请输入您的名字,邮箱帐号和评论,您的邮箱帐号会被保密,不会公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>