grunt-tms

Grunt plugin for juicer2tms

Getting Started

本插件基于civet, 用来将符合Juicer语法的html文件转为符合tms语法的html文件

插件安装：

npm install grunt-tms --save-dev

The "tms" task

Overview

插件安装之后，在Gruntfile.js中开启：

grunt.initConfig({
 
    ...
    
        tms: {
            options: {
                DEFAULT_TITLE: '新默认标题',
                DEFAULT_GROUP: '新默认组',
                DEFAULT_ROW: 2,             // 对列表数据，默认行数，对应"defaultRow"属性
                DEFAULT_MAXROW: 6,          // 对列表数据，默认最大行数，对应"row"属性
                THRESHOLD_MULTISTRING: 2    // 判断为多行文本的阈值：字符串中包含2个以上的标点符号
            },
            main:{
                files: [
                    {
                        expand: true,
                        cwd:'build',
                        // 对'*.tms.html'文件进行juicer2tms转换
                        src: ['**/*.tms.html'],
                        dest: 'build/',
                        ext: '.tms.html'
                    }
                ]
            }
        },
    ...
 
});
 
grunt.loadNpmTasks('grunt-tms');
    
...
    
// 默认构建任务
grunt.registerTask('build', '默认构建任务', function() {
    task.run([..., 'tms', ...]);
});
 

配置就完成了，执行grunt build就会将src目录下**/*.tms.html文件转为符合tms语法的文件。

注意：为了避免.tms.html被grunt-combohtml再次生成一个.html后缀的文件，建议combohtml任务的配置中main->files->ext属性不指定

Options

options.DEFAULT_TITLE

• Type: String
• Default value: 默认标题
• 生成的<cms:custom title="XXXX">中XXXX的默认值

options.DEFAULT_GROUP

• Type: String
• Default value: 默认分组
• 生成的<cms:custom group="XXXX">中XXXX的默认值

options.DEFAULT_ROW

• Type: Number
• Default value: 2
• 对列表数据，默认行数，对应"defaultRow"属性；生成的<cms:custom defaultRow="XXXX">中XXXX的默认值

options.DEFAULT_MAXROW

• Type: Number
• Default value: 6
• 对列表数据，默认最大行数，对应"row"属性；生成的<cms:custom row="XXXX">中XXXX的默认值

options.THRESHOLD_MULTISTRING

• Type: Number
• Default value: 2
• 判断为多行文本的阈值：字符串中包含2个以上的标点符号

模板书写

数据格式

直接使用mock数据解析生成对应tms标签配置。

由于cms标签中只有cms:repeat可以嵌套其他标签，目前支持的数据格式：

• 
  • 普通键值对，值为基本类型，用 cms:custom即可解决
• 
  • 普通数组，数组项值为上面的普通键值对，用 cms:custom + defaultRow + row，要求只有单一key
• 对于 <cms:repeat> 的支持，采用juicer中的each语法：{@each name in range(min,max)}，自动嵌套一层repeat标签，其中name、min、max分别配置到 <cms:repeat> 标签的title、defaultRow和row属性

考虑开发成本和复杂性以及大多数使用场景，beta版暂时不提供复杂数据格式的支持，对于repeat数据对各个字段分别独立定义mock数据

约定及默认配置

1. 生成的tms标签只用到了 <cms:custom> 和 <cms:repeat>，暂不支持其他定制标签
2. mock数据以 <!--#def --> 包围的区块定义，要求为标准的JSON格式数据，其作用域为 --> 紧跟的html节点的区间
3. mock数据包含两个可配置属性 cmsTitle、cmsGroup，如果不想用自动生成的 title 和 group 属性，可以明确指定
4. 依赖mock数据的值对其字段类型进行自动解析，大多通过正则完成：
   • url、date、email根据正则
   • boolean根据类型检测
   • 默认为string，包含的标点符号超过2个判定为multiString
   • 建议对于字符串值直接mock数据中写上要生成的fields中的描述，如{"province":"省份"} =><cms..fields="province:省份:string"..>，而不要写成真实的mock值如{"province":"浙江"}，对于数组的情况，直接取数组中第一项进行类型解析
5. 对列表数据，defaultRow 默认值为2，row默认值为6，如果mock数据（即数组）长度超过6则将 row 设为mock数据长度
6. 对 <cms:repeat> 的支持实际上是拆解为循环中第一项，对第一项各个字段再分别用第2条来完成

Release History

0.1.0

[!]基本完成功能

0.1.2

[!]修复寻找节点bug

TODO： cms:repeat用到了juicer中的range语法，但flex-combo暂不支持range语法的预览

0.1.3

[!]civet已从 npm 完全移除，为保持兼容将 civet 备份过来