w3ctech

使用grunt-cptpl编译前端模板文件成javascript文件。

如果你的项目使用模板引擎,这款插件将必不可少:https://github.com/hanan198501/grunt-cptpl

Why?

grunt-cptpl使前端开发也可以像后端一样,把模板文本存放在单独的文件中(而不是放在dom节点但或者手工js拼接字符串), 然后将其编译成javascript文件。使我们的开发工作从繁琐的dom操作和JS拼串中解放出来,提高我们的开发效率。最主要的,模板文件作为单独文件存放,可以使我们的项目代码逻辑更加清晰,更具可维护性。

内置支持各大主流模板引擎:artTemplate'、 Handlebars 、Hogan 、 Underscore、 juicer、 doT、 kissy、 baiduTemplate。 对于不在此列的引擎,提供了自定义编译方法接口。

grunt-cptpl都做了啥?

grunt-cptpl会读取每个模板文件的文本内容,用指定模板引擎的预编译方法将其包裹起来,生成一个新的javascript文件。这个javascript文件文件里面的内容,其实就是模板引擎的预编译方法调用,传入的参数为模板文件的文本内容。这样我们就有了一个编译好的模板函数,要渲染的时候把数据传给它就好了。

入门

这个插件需要Grunt ~0.4.4

如果你还没有使用过Grunt, 务必阅读一下它的入门指南, 里面介绍了如何创建一个Grunt配置文件以及如何安装和使用grunt插件。一旦你熟悉这个过程,你可以使用如下命令安装grunt-cptpl。

npm install grunt-cptpl --save-dev

一旦插件被安装, 可以在Gruntfile里面添加如下代码来启用:

grunt.loadNpmTasks('grunt-cptpl');

配置 "cptpl" task

概观

在项目的Gruntfile文件中, 有一个grunt.initConfig()方法, 在里面添加一个cptpl数据对象。 options为目标任务的自定义选项,选填。 files为文件列表的输出目录和对应的原文件列表。如下面代码里, ['test/html/abc.html', 'test/html/abc2.html', 'mytemplate/*'] 为原文件列表, 'tmp/' 为输出的目录,支持通配符 *

grunt.initConfig({
    cptpl: {
        your_target: {
            options: {
                // 任务特定的选项放在这里
            },
            files: {
                // 目标特定的文件列表放在这里
                'tmp/': ['test/html/abc.html', 'test/html/abc2.html', 'mytemplate/*']
            }

        },
    },
});

选项

options.banner

Type: String , Default value: ''

在生成的javascript文件开头写入的文本信息,通常为一段javascript注释文字,如 /*BANNER*/

options.engine

Type: String , Default value: 'handlebars'

指定模板引擎,内置支持的模板引擎有: 'arTtemplate''Handlebars''Hogan''underscore''juicer''doT''kissy''baiduTemplate'

Example: 运行下面cptpl任务,将会把 test/html/ 目录下的 abc.html 编译成 abc.js , 存放在 tmp/ 目录。

cptpl: {
    test: {
        options: {
            banner: '/*BANNER*/\n',
            engine: 'dot'
        },
        files: {
            'tmp/': ['test/html/abc.html']
        }
    }
}

abc.htmlabc.js 的内容如下:

//abc.html中的内容:
<h1>{{title}}</h1>
<p>{{content}}</p>


//编译后,abc.js中的内容:
/*BANNER*/
;window.abc = doT.template('<h1>{{title}}</h1><p>{{content}}</p>');

options.context

Type: String , Default value: 'window'

指定生成的javascript文件中编译好的模板函数的上下文对象, 如果此选项的值为 '{AMD}',则把编译好的模板函数包装成一个AMD模块,如果此选项的值为 '{CMD}', 则把编译好的模板函数包装成一个CMD模块。

Example:

cptpl: {
    test: {
        options: {
            engine: 'dot',
            context: 'myObj'
        },
        files: {
            'tmp/': ['test/html/abc.html']
        }
    }
}

// context: 'myObj'
// abc.js ==>
;myObj.abc = doT.template('<h1>{{title}}</h1><p>{{content}}</p>');


// context: '{AMD}'
// abc.js ==>
;define(function() {
    return doT.template('<h1>{{title}}</h1><p>{{content}}</p>');
});


// context: '{CMD}'
// abc.js ==>
;define(function(require, exports, module) {
    module.exports = doT.template('<h1>{{title}}</h1><p>{{content}}</p>');
});

options.reName

Type: Function , Default value: function (name) {return name;}

重命名方法,接受一个参数,参数值为源文件名, 此方法的返回值将作为生成的javascript文件名,以及模板函数挂载到的上下文对象属性名。

Example: 下面代码将生成的javascript文件名前面都加上 __abc.html 将生成 __abc.js

cptpl: {
    test: {
        options: {
            engine: 'dot',
            reName: function (name) {
                return '__' + name;
            }
        },
        files: {
            'tmp/': ['test/html/abc.html']
        }
    }
}

// __abc.js ==>
;window.__abc = doT.template('<h1>{{title}}</h1><p>{{content}}</p>');

options.customEngines

Type: Object , Default value: {}

自定义模板引擎预编译包裹方法。如果内置模板引擎无法满足您,可以通过此选项设置一个你需要的模板引擎预编译包裹方法。格式为 {name: function(t){}}name为模板引擎名, 对应的function(t){}就是包裹方法,接受一个参数t, t为模板文件的文本内容, 您可以拼成用编译函数包裹起来的js代码,并把包裹后的结果作为函数返回值。

Example:

cptpl: {
    test: {
        options: {
            engine: 'myEngine',
            customEngines: {
                myEngine: function (t) {
                    return 'myEngine.compile(' + t + ');'
                }
            }
        },
        files: {
            'tmp/': ['test/html/abc.html']
        }
    }
}

// abc.js ==>
;window.abc = myEngine.compile('<h1>{{title}}</h1><p>{{content}}</p>');

Github:https://github.com/hanan198501/grunt-cptpl

前端圈微信

扫码关注前端圈微信公众号

共收到2条回复

  • 恭喜获得:签名版《JavaScript语言精髓与编程实践》第二版

    请把你的收件地址告诉我。

    回复此楼
  • 谢谢波波,我微博私信给给你吧,我的微博是http://weibo.com/hanan321

    回复此楼