grunt-cmd-template

0.0.3 • Public • Published

将HTML模版转成CMD模块

配置grunt task

grunt.initConfig({
    template: {
        options: {
            prettify: true,
            provider: 'underscore',
            templateSettings: {

            }
        },
        all: {
            files: [{
                expand: true,
                cwd: 'src',
                src: ['test/*.html'],
                dest: 'build',
                ext: '.js'
            }]
        },
        compile: {
            options: {
                prettify: false
            },
            files: {
                'build/tmpl/detail.js': ['src/tmpl/detail.html']
            }
        }
    }
});

HTML template

<!DOCTYPE html>
<html>
<head>
    <meta charset="<%= doc.charset %>">
    <title><%= doc.title %></title>
</head>
<body>
<p>Now: <%= format(time) %></p>
<ul>
    <% for (var i = 0; i < list.length; i++) { %>
    <% var content = list[i]; %>
    <li><%= content %></li>
    <% } %>
</ul>
</body>
</html>

Compile

seajs.use('tmpl/content', function(ContentTmpl){
    var data = {
        doc: {
            charset: 'utf-8',
            title: 'DOCUMENT',
        },
        time: 1405959866384,
        format: function (time) {
            var d = new Date(time);

            return d.toJSON().replace(/T/,' ').replace(/\.\w+/,'');
        },
        list: [
            'item1', 'item2', 'item3'
        ]
    };

    var html = ContentTmpl.render(data);
});

Result html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOCUMENT</title>
</head>
<body>
<p>Now: 2014-07-21 16:24:26</p>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>

Package Sidebar

Install

npm i grunt-cmd-template

Weekly Downloads

1

Version

0.0.3

License

none

Last publish

Collaborators

  • l3au