grunt-html-template,使用模板引擎来切图
发布在Allenice's blog2014年12月2日view:5465
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

grunt-html-template,使用模板引擎来切图

grunt-html-template 是一个使用 swig.js 模板引擎来生成 html 的 grunt 插件。因为模板生成的 html 格式会有点乱,所以我又加了 js-beautify 来格式化生成的代码。

安装

npm install grunt-html-template --save-dev

“html_template” task

grunt.loadNpmTasks('grunt-html-template');
grunt.initConfig({
    html_template: {
        options: {
            locals:  {
                title: "Allenice"
            },
            beautify: {
                indent_size: 2
            }
        },
        build_html: {
            expand: true,
            cwd: "test/demo/tpl",
            src: "**/*.tpl",
            dest: "test/demo/www"
        }
    },
});

配置

  1. 你可以使用 swig.js 的所以选项
  2. 在 beautify 属性那里配置 js-beautify 的选项

默认配置

grunt.initConfig({
    html_template: {
        dev: {
            options: {
                autoescape: ture,
                cache: "false",
                varControls: ['{{', '}}'],
                tagControls: ['{%', '%}'],
                cmtControls: ['{#', '#}'],
                locals:  {},
                cache: false,
                loader: swig.loaders.fs,
                beautify: {
                    indent_size: 4,
                    indent_char: " ",
                    indent_with_tabs: false,
                    preserve_newlines: true,
                    max_preserve_newlines: 10,
                    wrap_line_length: 0,
                    indent_inner_html: false,
                    brace_style: "collapse"
                }
            },
            expand: true,
            cwd: "test/demo/tpl",
            src: "**/*.tpl",
            dest: "test/demo/www"
        }
    },
});
注: 如果模板中使用了 <script type="text/template" ></script> 之类的前端模板,请在 beautify 中配置 unformatted: ['script'], 不然他会将此当做 javascript 代码来格式化,读取出来的 html 会有一些多余的空格和转义。

原文: http://blog.allenice233.com/2014/12/02/grunt-html-template/

评论
发表评论
7年前
赞了此文章!
7年前

@wizcabbit 难道是我搞错了切图的含义。。。

7年前

@wizcabbit 那切图这个词就用的很不恰当了。。我以为是可以自动切图的东西

7年前

@芋头 客户端模板引擎,可以看做JS里的smarty之类……

7年前

swig是使用类似Liquid语法的模板引擎吧,这和切图有什么关系吗……

7年前
添加了一枚【评注】:不太明白这个东西是用来做啥的,切图的意思是啥?(´・_・`)
7年前
赞了此文章!
WRITTEN BY
Allenice
我只是一个单纯的萝莉控,H什么的才没有想过!
TA的新浪微博
PUBLISHED IN
Allenice's blog

我的前端技术博客内容

我的收藏