grunt-flexcombo

grunt-flexcombo

flex-combo的grunt插件版本，Grunt-Flexcombo 原理。

Getting Started

依赖 Grunt 版本~0.4.1

安装grunt-flexcombo

npm install grunt-flexcombo --save-dev

安装后，在Gruntfile.js中载入任务

grunt.loadNpmTasks('grunt-flexcombo');

"flexcombo" 任务配置

在grunt.initConfig()中添加flexcombo的配置：

grunt.initConfig({
	flexcombo:{
		debug:{
			options: {
				target:'src',
				urls:'/group/project',// 匹配[ag].tbcdn.cn时的访问路径
				port:'80',// flexcombo服务端口
				proxyport:'8080',// 反向代理服务端口
				servlet:'?',//开启combo的字符串
				separator:',',//多文件分隔符
				charset:'utf8',//默认输出文件的编码
				proxyHosts:['a.com','b.com'],//本地服务的域名
				// 过滤参数
				filter:{ 
					'-min\\.js':'.js',
					// 当访问a.com/go/act/demo.php时，实际请求
					// a.com/demo.html
					'/go/act/\(.+\\.\)php':'/$1html'
				}
			}
		}
	},
	// flexcombo 需要配合 watch 模块一起使用
	watch: {
		'all': {
			files: ['src/**/*'],
			tasks: [ 'your-build-target' ]
		}
	}
});

// 注册 debug 任务
grunt.registerTask('debug', '开启debug模式', function() {
	task.run(['flexcombo:debug','watch:all']);
});

任务说明：

flexcombo任务无法单独运行，需要配合watch启动。一份完整的Gruntfile.js样例。

启动服务：

sudo grunt debug

配置参数说明：

options.target

• 类型：String
• 默认值：''

基于此目录启用本地服务，类似Apache中的DocumentRoot，需写相对目录，相对于Gruntfile.js所在的目录。

options.urls

• 类型：String
• 默认值：''

启用本地服务后，访问到options.target目录对应的url里的路径，比如options的配置：

options:{
	target:'src'
	urls:'/a/b/c'
}

访问URLhttp://localhost/a/b/c/demo.html，将返回./src/demo.html。此配置主要用作模拟cdn的真实路径，比如直接访问http://g.tbcdn.cn/a/b/c/index.js，将访问./src/index.js。

options.port

• 类型：String
• 默认值：'80'

flexcombo 服务的端口，默认启动在80端口，启动在80端口可以让你直接绑定Host到本机，若启动在其他端口，则只能用代理工具来辅助访问。

options.proxyport

• 类型：String
• 默认值：'8080'

反向代理服务器的端口。

options.servlet

• 类型：String
• 默认：'?'

开启combo的前缀。不同的开发环境有不同的combo需求。通过servlet,seperator两个参数决定。

options.separator

• 类型：String
• 默认值：','

Combo的url中多个文件的分隔符。

options.charset

• 类型：String
• 默认：'utf8'

默认输出文件的编码，主要用于约束输出assets文件的编码。

options.proxyHosts

• 类型：String 或者 Array
• 默认：'' 或者 []

本地服务自定义虚机的域名。除了a.tbcdn.cn和g.tbcdn.cn这两个默认域名，可以新增自定义域名配置，多个域名用数组表示。

自定义域名无须配Host访问，只需配端口为proxyport的代理服务即可。

注意：来自proxyHosts中配置的域名的url请求路径不会匹配options.urls，比如proxyHosts:'a.com'，那么访问

http://a.com/demo.html

将访问本地文件./src/demo.html

options.filter

• 类型：Object
• 默认值：{}

filter可以用来过滤传入url。filter对象，其中key是匹配的正则表达式，value是替换的字符串，支持正则表达式变量。替换的顺序与定义无关。filter类似于Apache中的rewrite规则

options.urlBasedCharset

• 类型：Object
• 默认值：{}

urlBasedCharset可针对某一个url设置响应字符集。例如：

"charset" : "utf-8",
"urlBasedCharset" : {"/apps/aaa.js":"gbk"}

允许在大多数情况下返回字符集为utf-8字符集的资源。但在访问/apps/aaa.js的情况下，以gbk的方式编码。 这个特性多被用来引入编码几不同的第三方脚本。

options的更多配置请参照flex-combo。

服务启动

flexcombo将在本地启动两个服务

启动服务后，可以直接通过localhost来预览本地文件

http://localhost/group/project

若要模拟真实环境调试，两种方法（二者取其一），推荐第二种：

1. 将cdn配向开发机127.0.0.1 g.tbcdn.cn a.tbcdn.cn
2. 将浏览器或者设备HTTP代理配置到本机的反向代理服务的端口

比如在手机终端设置代理方法：

SSI

该服务添加了jayli-server，支持标准格式的 SSI include

<!--#include path="../src/file-path.html" -->

使用案例1

KISSY 组件如何调试线上代码

使用案例2

KISSY项目构建工具和本地环境：generator-clam一同使用，构建工具生成本地配置文件，形如：

flexcombo:{
	debug:{
		options:{
			proxyHosts:'trip.taobao.com',
			target:'build/',
			proxyport:8080,
			urls:'/trip/proj/0.0.2',
			port:'80',
			servlet:'?',
			separator:',',
			charset:'utf8',
			filter:{
				'-min\\.js':'.js',
				'/go/act/\(.+\\.\)php':'/$1html',
			}
		}
	}
}