❤
npm
Sign UpSign In

grunt-tpl-compiler

0.1.6 • Public • Published

grunt-tpl-compiler

Grunt plugin for juicer-based template compile to kissy module

将基于 juicer 语法的模板文件编译为 KISSY 模块。

Getting Started

This plugin requires Grunt ~0.4.2

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-tpl-compiler --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-tpl-compiler');

The "tpl_compiler" task

Overview

In your project's Gruntfile, add a section named tpl_compiler to the data object passed into grunt.initConfig().

grunt.initConfig({
  tpl_compiler: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Options

options.ext

Type: String Default value: 'tpl'

生成 js 文件的后缀字符串

Usage Examples

Default Options

In this example, the default options are used to do something with whatever. So if the testing file has the content Testing and the 123 file had the content 1 2 3, the generated result would be Testing, 1 2 3.

grunt.initConfig({
  tpl_compiler: {
    options: {
        ext: '-tpl',
        replaceEscapeMap: {
            '\xB0': '°'
        }
    },
    main: {
        files: [
            {
                expand: true,
                cwd: 'src/',
                src: ['**/*.tpl.html'],
                dest: 'src/'
            }
        ]
    }
  },
});

词汇

  • HTML 模板文件
    • 一个普通的 HTML 文件，其中以 juicer 语法书写要用到的模板文件，模板文件通过 DOM 节点的 data-tpl 属性指定各个模板的钩子。
  • JavaScript 模板文件
    • 从 HTML 模板文件生成的对应的 JavaScript 文件，该文件为一个普通的 KISSY 模块，对 HTML 模板文件中的各个模板进行抽离，对外暴露 get、set、register、render 方法以读写模板字符串。
    • 一个 HTML 模板文件对应生成一个 JavaScript 模板文件。

使用方法

  1. 在 "src" 目录下的指定 HTML 模板文件中编辑，根据 grunt config 中的 main->files->src 指定，如上面的 **/*.tpl.html 即为 .tpl.html 后缀的 html 文件视为需要处理的 HTML 模板文件，示例：

    [src/pages/index.tpl.html]

     
        ...
        <body>
            <div class="page">
     
        		<div id="J_Test" data-tpl="ProdList">
            		<h2>${title}</h2>
            		<ul class="prod-list">
                		{@each prods as prod}
                		<li class="prod-item">${prod.name} - ${prod.price}</li>
                	{@/each}
            	</ul>
        	</div>
     
        	<div class="test2">
            	<section data-tpl="MoreList">
                	<dl>
                    	{@each moreList as item}
                    	<dt>${item.title}</dt>
                    	<dd>${item.desc}</dd>
                    	{@/each}
                	</dl>
            	</section>
        	</div>
     
        </div>
    </body>
     

    其中指定了两个模板：<div id="J_Test" data-tpl="ProdList">...</div> 和 <section data-tpl="MoreList"></section>。

  2. 执行 grunt tpl_compiler，生成对应的 JavaScript 模板文件：

    [src/pages/index-tpl.js]

        /**
     	 * KISSY Template Module for test
     	 */
        KISSY.add(function (S, Juicer) {
            'use strict';
            /**
         	 * 维护所有用到的模板
         	 * @class Template
         	 * @constructor
         	 */
     		var templates = {
            	ProdList: '<div id="J_Test" data-tpl="ProdList"><h2>${title}</h2><ul class="prod-list">{@each prods as prod}<li class="prod-item">${prod.name} - ${prod.price}</li> {@/each} </ul></div>',
            	MoreList: '<section data-tpl="MoreList"><dl>{@each moreList as item}<dt>${item.title}</dt><dd>${item.desc}</dd> {@/each} </dl></section>'
        	};
            return {
        		/**
         	 	 * 注册模板自定义函数
         	 	 * @param name 需要替换的模板中用到的名字
         	 	 * @param fn 自定义函数
         	 	 */
        		register: function (name, fn) {
            		Juicer.register(name, fn);
        		},
        		/**
         	 	 * 覆盖已有模板
         	 	 * @param key {String} template 模板键
         	 	 * @param tmpl {String} 模板
         	 	 */
        		set: function (key, tmpl) {
            		templates[key] = tmpl;
        		},
        		/**
         	 	 * 获取已有模板
         	 	 * @param key {String} 模板Key
         	 	 * @returns {String} 模板内容
         	 	 */
        		get: function (key) {
            		return templates[key];
        		},
        		/**
         	 	 * 根据指定的模板key和数据渲染生成html
         	 	 * @param key 模板的key
         	 	 * @param data json数据
         	 	 * @returns {String} 
         	 	 */
        		render: function (key, data) {
            		return Juicer(templates[key], data);
        		}
            };
        }, { requires: ['gallery/juicer/1.3/index'] });

  3. 这样其他模块中需要依赖模板的地方，直接通过 KISSY 模块 require 该 JavaScript 模板文件即可，通用的 register 方法也可以写在该 JavaScript 模板文件中。

  4. 修改 src/pages/index.tpl.html，重新构建后生成的 src/pages/index-tpl.js 中 只会覆盖 var templates = {...} 部分。因此如果直接修改 src/pages/index-tpl.js 中除 var templates = {...} 的部分，重新构建时修改内容 会保留而不会被覆盖掉。

  5. 建议将该任务加入到 watch 中实时编译模板文件，保证本地服务实时取的是最新的模块。

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • [0.1.6] fix for this.files.src is Array.
  • [0.1.4] 用 cheerio 替换 jsdom，避免 windows 下 jsdom 安装失败，移除 htmlmin
  • [0.1.3] Bugfix for html escape
  • [0.1.0] 基本功能完成

Readme

Keywords

Package Sidebar

Install

npm i grunt-tpl-compiler

Repository

github.com/dickeylth/grunt-tpl-compiler

Homepage

github.com/dickeylth/grunt-tpl-compiler

Weekly Downloads

1

Version

0.1.6

License

none

Last publish

Collaborators

  • dickeylth
  • bachi
Try on RunKit
Report malware