简介
gum-tmodjs是一个基于tmodjs的前端模板引擎预编译工具，可以将模板转化为可执行的js代码，提升模板性能。使用gum-tmodjs可以轻松地对前端模板进行管理和预编译。
安装
npm安装
npm i gum-tmodjs -D
全局安装
npm i gum-tmodjs -g
使用
命令行使用
预编译
在命令行中使用以下命令可以进行前端模板预编译。
gum-tmodjs ./templates -o ./output
其中，./templates为存放模板的路径，./output为输出路径。
可以添加一些配置项，以满足特定的需求。
-c，配置文件路径-f，目前支持6种格式的文件，分别为.art、.tpl、.ejs、.jade、.handlebars、.mustache-s，存放静态数据的路径，是字符串或数组-n，定义输出的变量名，默认为namespace，非ES6标准-d，是否开启调试模式，默认为false--charset，定义模板文件的字符集，默认为utf-8
gum-tmodjs ./templates -o ./output -c gum-conf.json -f art,tpl,ejs,jade,handlebars,mustache -s ./static -n Gum -d true --charset utf-8
监听模板文件
在命令行中使用以下命令可以监听模板文件的变化。
gum-tmodjs ./templates -o ./output --watch
配置文件使用
可以新建一个配置文件gum-conf.json进行配置，以便在后续的操作中简化命令行操作。
配置文件的内容如下：
-- -------------------- ---- -------
-
------- --------------
----- -----------
------- ------
---------- --------
--------- -----------
-------- ------
------- -
---------- -----
--
------------ ------
-------- ----
-可以在命令行中使用以下命令进行预编译。
gum-tmodjs -c gum-conf.json
案例分析
下面是一个基于gum-tmodjs的经典案例分析。
目标
在页面上展示一张图片，并在图片上添加一些文字，文字内容和样式由后端返回。
实现
模板代码
在模板文件index.art中定义一个图片和文字的容器。
<div class="card">
<img src="{{imgSrc}}" alt="{{imgAlt}}">
<h2>{{title}}</h2>
<p>{{content}}</p>
</div>JS代码
在JS文件中使用template方法解析模板，并传入数据。
-- -------------------- ---- ------- ----- -------- - ---------------------- ----- ---- - - ------- ------------------------------- ------- -------------- ------ ----------------- -------- ------------------------------------------------------------ -- ----- ---- - ---------------------------- ------ ---------------------------------------- - -----
结果
浏览器中显示如下内容。
<div class="card"> <img src="https://placehold.it/300x150" alt="placeholder"> <h2>gum-tmodjs使用教程</h2> <p>gum-tmodjs是一个基于tmodjs的前端模板引擎预编译工具，可以将模板转化为可执行的js代码，提升模板性能。</p> </div>
指导意义
gum-tmodjs是一款非常实用的前端模板引擎预编译工具。通过使用它，我们可以更加方便地管理和预编译前端模板，提升前端应用程序的性能。由于它在实际开发中的应用非常广泛，所以掌握它的使用方法和技巧对于我们的职业发展也非常有帮助。在此，推荐给所有前端开发人员阅读此文，进一步提高自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581181e8991b448d5365