grunt-flexcombo
Advanced tools
Grunt-flexcombo 是一款基于NodeJS的轻服务，便携且易于配置。用于淘系环境中的Demo服务和自定义虚机等场景。
author: @拔赤、@陶清
Grunt-flexcombo 是 flex-combo的grunt插件版本，Grunt-Flexcombo 原理介绍。
依赖 Grunt 版本~0.4.1
安装grunt-flexcombo
npm install grunt-flexcombo --save-dev
安装后，在Gruntfile.js中载入任务
grunt.loadNpmTasks('grunt-flexcombo');
在grunt.initConfig()中添加flexcombo的配置：
grunt.initConfig({
flexcombo:{
debug:{
options: {
longPolling:false, // 是否支持长连接
target:'src',
urls:'/group/project',// 匹配[ag].tbcdn.cn时的访问路径
port:'80',// flexcombo服务端口
proxyport:'8080',// 反向代理服务端口
servlet:'?',//开启combo的字符串
separator:',',//多文件分隔符
charset:'utf8',//默认输出文件的编码
proxyHosts:['a.com','b.com','demo.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']);
});
启动服务：
sudo grunt debug
任务说明：
flexcombo任务无法单独运行，需要配合watch启动。一份完整的Gruntfile.js样例。
上例中sudo grunt debug将会调用flexcombo服务，会在本地启动两个服务，两个服务分属两个端口proxyport（反向代理服务）和port（CDN 环境服务）
启动服务后，可以直接通过localhost或者IP来预览本地文件
http://localhost/group/project
也可以通过proxyHosts中的域名配置来访问：
http://demo.com/
若要模拟真实环境调试，两种方法（二者取其一），推荐第二种：
127.0.0.1 g.tbcdn.cn a.tbcdn.cn在Firefox中设置代理：
在手机终端设置代理方法：
然后访问真实页面，配合watch和你Gruntfile.js中的构建命令，可以开始调试，比如在Gallery中的代码调试：
该服务支持标准格式的 SSI include
<!--#include path="../src/file-path.html" -->
服务支持juicer模板渲染输出，因此在源html中可以直接用juicer语法来写页面，比如源文件:
<html>
<body>
<!-- 定义Mock数据 -->
<!--#def
{"list": [
{"name":" guokai", "show": true},
{"name":" benben", "show": false},
{"name":" dierbaby", "show": true}
]}
-->
<ul>
{@each list as it,index}
<li>${it.name} (index: ${index})</li>
{@/each}
</ul>
</body>
</html>
开启服务后浏览器中访问它，将输出：
<html>
<body>
<!-- 定义Mock数据 -->
<!--#def {"list": [ {"name":" guokai", "show": true},
{"name":" benben","show": false},
{"name":" dierbaby", "show": true} ]} -->
<ul>
<li>guokai (index: 0)</li>
<li>benben (index: 1)</li>
<li>dierbaby (index: 2)</li>
</ul>
</body>
</html>
即，数据和juicer模板混合输出了正确的结果。
如果源文件中存在Mock数据字段<!--#def ... -->，则服务将会解析文件中的juicer模板
这个功能主要提供了调试的渠道，写demo时就直接生成了juicer模板，通过grunt-combohtml（另行配置）可以将juicer语法的源文件编译为velocity语法和php语法。
是否采用长连接模式
基于此目录启用本地服务，类似Apache中的DocumentRoot，需写相对目录，相对于Gruntfile.js所在的目录。
启用本地服务后，访问到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。
flexcombo 服务的端口，默认启动在80端口，启动在80端口可以让你直接绑定Host到本机，若启动在其他端口，则只能用代理工具来辅助访问。
反向代理服务器的端口。反向代理服务器运行有过滤器，如果反向代理匹配proxyHosts和[ag].tbcdn.cn，则会将请求转发至flexcombo服务，否则去公网取文件。最后一并返回给客户端。
开启combo的前缀。不同的开发环境有不同的combo需求。通过servlet,seperator两个参数决定。
Combo的url中多个文件的分隔符。
默认输出文件的编码，主要用于约束输出assets文件的编码。
本地服务自定义虚机的域名。除了a.tbcdn.cn和g.tbcdn.cn这两个默认域名，可以新增自定义域名配置，多个域名用数组表示。
自定义域名无须配Host访问，只需配端口为
proxyport的代理服务即可。
注意：来自proxyHosts中配置的域名的url请求路径不会匹配options.urls，比如proxyHosts:'a.com'，那么访问
http://a.com/demo.html
将访问本地文件./src/demo.html
{}filter可以用来过滤传入url。filter对象，其中key是匹配的正则表达式，value是替换的字符串，支持正则表达式变量。替换的顺序与定义无关。filter类似于Apache中的rewrite规则
{}urlBasedCharset可针对某一个url设置响应字符集。例如：
"charset" : "utf-8",
"urlBasedCharset" : {"/apps/aaa.js":"gbk"}
允许在大多数情况下返回字符集为utf-8字符集的资源。但在访问/apps/aaa.js的情况下，以gbk的方式编码。 这个特性多被用来引入编码几不同的第三方脚本。
options的更多配置继承自flexcombo，请参照flex-combo。
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',
}
}
}
}
FAQs
FlexCombo
The npm package grunt-flexcombo receives a total of 2 weekly downloads. As such, grunt-flexcombo popularity was classified as not popular.
We found that grunt-flexcombo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.