基于Grunt的html模板化和语意化开发

来源：互联网发布：金数据是干嘛用的编辑：程序博客网时间：2024/05/18 14:42

制作此功能的动机：

1.作为前端开发人员，一直在使用大量的Div或者HTML标签实现展现形式，但个人理解，HTML标签语言的语义还是比较大众化与功能化的，针对企业稳定的框架而言，还是不够人性化；

2.同时，作为有一定年限的开发人员而言，都会形成大量的组件积累，而这些固化的积累需要通过不停的拷贝来复用，多余的重复的无效的工作量付出；

3.随着专业化的提升，组件化和应用化是软件的一个趋势，随着人力成本的增加，也是必须考虑的问题，降低门槛或者程序员分级分工是必然趋势，实现展现和实现组件进行分离；

4.JS有Dart,CoffeeScript,TypeScript;CSS有Less,Sass等工具，但html缺少此类语言来弥补这一空缺

目标：

实现helloworld的页面代码编写格式如下：

<import:zx name="base" src="base"/><html:base>    <helloworld:base welcome="您好，欢迎光临！"/></html:base>

主要内容为：包导入，命名空间，自定义标签语义

最终产出内容：

<!DOCTYPE html><html lang="zh-CN"><head><title>模板</title>    <meta charset="utf-8"/>    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">    <style>html, body {        height: 100%;    }</style></head><body><center>您好，欢迎光临！</center></body></html>

工具选择

1.前端人员期望语言为JS，优先考虑JS实现，选择了NodeJS，因为他能读写JS文件，而且是命令形式，给研发人员自我牛B的时尚感

2.前端开发自动化选择了Grunt，因为他上面已经积累了大量的压缩，合并，校验等一系统的NODEJS组件库

关键点：

1.包概念，包导入功能------------组件开发由多人开发，为了避免冲突，命名空间+包进行隔离是必须的

2.模板化、标签化语言------------前端对于HTML的熟悉，让我考虑继续使用xml的语言方式

实现理论（SO-EASY）

读取源代码---》解析源代码---》加载包组件---》组件替换----》目标文件落地

具体内容：

请自行用nodejs的npm安装:zx-grunt-parser,zx-grunt-html两个组件

是MIT协议，请自看实现源码，不做解释

环境搭建示例：

1.安装NodeJS：http://nodejs.cn/download/

2.在目标目录创建NodeJS的插件需求文件:目标目录/package.json

{  "name": "demo",  "description": "parser zxhtml template to html",  "version": "0.1.0",  "author": {    "name": "Bennes",    "email": "Bennes@163.com"  },  "engines": {    "node": ">= 0.8.0"  },  "scripts": {    "test": "grunt test"  },  "devDependencies": {    "grunt": "~0.4.5",    "grunt-contrib-clean": "^0.7.0",    "xml2js": "^0.4.15",    "zx-grunt-html": "^0.1.10",    "zx-grunt-parser": "^0.1.6"  },  "peerDependencies": {    "grunt": "~0.4.5"  },  "keywords": [    "gruntplugin"  ]}

3.进入window批处理命令行，切换至目标目录（命令:cd /d 目标目录）

4.执行命令npm install,自动下载node包

5.下载grunt的命令行执行包：npm install -g grunt-cli

到此为止，环境安装完成,你可以通过在目标目录输入grunt -V查看对应的grunt版本

6.编写自已的代码

自已的代码有二部分内容:

语义代码：目标目录/src/helloword.html

<import:zx name="base" src="base"/><html:base>    <helloworld:base welcome="您好，欢迎光临！"/></html:base>

模板代码：目标目录/template/helloword.zx

<templates>    <template name="html">        <![CDATA[        <!DOCTYPE html>        <html lang="zh-CN">            <head>                <title>模板</title>                <meta charset="utf-8"/>                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">                <link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.min.css" rel="stylesheet">                <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">                <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">                <style>                    html,body{                        height:100%;                    }                </style>            </head>            <body>                <%this.zxBlock%>            </body>        </html>        ]]>    </template>    <template name="helloworld">        <![CDATA[        <center><%this.welcome%></center>        ]]>    </template></templates>

注：a.模板语言使用this.来引用自定义标签中的属性；b.模板使用<%%>来包裹代码段；c.模板代码段支持js语法；d.this.zxBlock作为块标签代码嵌入，为关键字，变量名中不要使用;e.模板文件以.zx作为后缀，如果层级比较深，可命名用a.b.c；f. //头部可以是数字和大小写字母，包空间必须为小写字母与数字，属性名为大小写字母与数字，属性只能被双引号包裹,属性值为大小写字母与数字，空格，及特殊字符";-,:[]{}'".当属性中出现[]{}，则属性值转化为对象存储,具体词条解析正则表达式如下（大家需要，可自行修改）：

var labelReg = new RegExp("(<[a-zA-Z0-9]+:[a-z0-9]+(\\s*[a-z0-9A-Z]+=\\\"[^\\\"]*\\\")*\\/{0,1}>)|(<\\/[a-zA-Z0-9]+:[a-z0-9]+>)");

块标签与个体标签的概念来源于velocity

块标签：内容嵌套其他标签或有内容的标签，如<center>abc</center> <div>fafdfdf</div>

个体标签：<input type="text" value="你好">、<br/>

<import:zx name="base" src="base"/>  此语句作为包导入语句，只能修改name与src   name作为后面自定义标签的内容，如<span style="font-family: Arial, Helvetica, sans-serif;">html:base，表示base下的html模板</span>

<span style="font-family:Arial, Helvetica, sans-serif;">src的内容，表示模板位置，为gruntfile.js中配置的模板目录下文件，可以为com.base，相当于com/base.zx模板文件，其中标签语言中的前半部分需要与模板中的</span><pre name="code" class="html"><template name="html">中name的属性值进行对应

7.配置执行任务文件（此内容，请自学Grunt官网，以下仅供参考）：Gruntfile.js

/* * grunt-zx-html * https://github.com/zengxiao/template * * Copyright (c) 2015 Bennes * Licensed under the MIT license. */'use strict';module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    clean:['tmp/**/**','bin/**/**'],    zx_parser: {      build: {          options: {              trimable:true,              basePath:"src/",              binPath:"tmp/"          },          files: {              'tmp/': ['src/**/**.html']          }      }    },    // Configuration to be run (and then tested).    zx_html: {        build: {            options: {                basePath:"tmp/",                binPath:"bin/",                tmplPath:"template/",                trimable:true            },            files: {              'tmp/': ['tmp/**/*.html']            }         }    }  });  grunt.loadNpmTasks('grunt-contrib-clean');  grunt.loadNpmTasks('zx-grunt-parser');  grunt.loadNpmTasks('zx-grunt-html');  grunt.registerTask('default', ['clean','zx_parser','zx_html']);};

zx_parser参数说明：

options: {              trimable:true,//是否去除源代码的换行与空格              basePath:"src/",//当前目录的源代码              binPath:"tmp/"//当前词条解析中间成果物保存目录          },          files: {              'tmp/': ['src/**/**.html']//哪此作为源文件**作为匹配符          }

zx_html参数说明：

options: {                basePath:"tmp/",//zx_parser对应的binPath目录                binPath:"bin/",//最终成果物目录                tmplPath:"template/",//模板目录                trimable:true//是否对模板中进行空格与换行去除            },            files: {              'tmp/': ['tmp/**/*.html']//为词条解析中间成果物            }

最终完成之后，目标目录文件列表如下

├─node_modules(此目录下的文件不列举了)
├─src

└─helloworld.html
└─template

└─base.zx

8.代码完成，看收获，只需要在cmd批处理中,执行grunt即可，最终会产生一个压缩版本的html内容，如果需要格式化一下，请使用其他工具，暂时未开发

在线格式化地址：http://tool.oschina.net/codeformat/

现在很多编辑也支持格式化

最后的期望：希望大家能来丰富模板库，最后，能快速的创建前端html代码，如果你想更改某个控件，在也不用一个个地方找了；你不善长页面，自定义的标签+组件，同样可以让你快速呈现自己的页面

后面有机会，我将继续丰富与webstorm的整合，实现模板提醒；开发一个像JSDuck的工具，快速从模板中提取自定义标签文档，如果你有兴趣，欢迎加我微信:zx86250268

0 0