杂项:grunt-tmod

Posted storebook

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了杂项:grunt-tmod相关的知识,希望对你有一定的参考价值。

ylbtech-杂项:grunt-tmod

 前端模板预编译工具 tmodjs 的grunt自动化插件。

1.返回顶部
1、

grunt-tmod

前端模板预编译工具 tmodjs 的grunt自动化插件。

Getting Started

需要环境: Grunt ~0.4.1

如果你没有用过 Grunt , 可以先看一下 新手入门 指南, 里面有讲解怎么创建一个 Gruntfile 和如何使用grunt插件.

顺路推荐 : 中文版的grunt社区

安装插件:

npm install grunt-tmod --save-dev

安装完插件后要在gruntfile里面加上这句代码,载入这个插件:

grunt.loadNpmTasks(‘grunt-tmod);

设置

src

  • 类型:String | Array

模版文件

dest

  • 类型:String

输出路径。

options

支持tmodjs的配置,还新增如下字段:

options.base

  • 类型:String

指定模板的根目录,以便缩短编译后的模板id访问路径。

示例:

tmod: {
    template: {
        src: ‘./tpl/src/**/*.html,
        dest: ‘./dist/template.js‘,
        options: {
            base: ‘./tpl/src‘
        } 
    }
}

以某个模板为例,默认情况调用模板的路径将可能会很长:

template(‘./tpl/src/home/main‘, data)

使用base后可以省略模板目录调用模板

template(‘home/main‘, data)

示例

基本

module.exports = function(grunt){

    grunt.initConfig({
        tmod: {
            template: {
                src: ‘./tpl/**/*.html‘,
                dest: ‘./dist/template.js‘,
                options: {
                    combo: true
                } 
            }
        }
    });


    grunt.loadNpmTasks(‘grunt-tmod‘);

    grunt.registerTask(‘default‘, [‘tmod‘]);

};

监控模板修改即时编译

原tmodjs有配备的watch功能,在grunt中统一使用watch插件来实现,所以取消了grunt-tmodjs中的watch参数.具体设置方法可以参照下面带watch的配置示例,也可以参考grunt-contrib-watch官网的说明.

先安装watch插件

npm install grunt-contrib-watch --save-dev
module.exports = function(grunt){

    grunt.initConfig({
        tmod: {
            template: {
                src: ‘./tpl/**/*.html‘,
                dest: ‘./dist/template.js‘,
                options: {
                    combo: true
                } 
            }
        },
        watch: {
            template: {
                files: ‘<%=tmod.template.src%>‘,
                tasks: [‘tmod‘],
                options: {
                    spawn: false
                }
            }
        }
    });


    grunt.loadNpmTasks(‘grunt-tmod‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);

    grunt.registerTask(‘default‘, [‘tmod‘, ‘watch‘]);

};

 

使用调试模式编译

运行grunt任务的时候加上--debug参数即可:

grunt --debug

Release History

v 0.2.0 遵循标准的 grunt 路径配置规范,同时支持编译错误显示。注意:不兼容历史版本 14-04-30

v 0.1.6 修复dest的路径问题 , 原本dest属性是放在files属性里 , 0.1.6版本后建议将 dest 属性放在 option 中, 如本篇 readMe 的代码所示. 如果有多个模版文件目录需要配置,建议使用多个任务的方式来配置,不建议在src中放入路径数组. 13-12-08

v 0.1.5 修复不支持多任务的bug 13-11-14

v 0.1.4 去除掉打包的tmodjs改为依赖,将内置tmod依赖改为0.0.2版本 13-11-11

v 0.1.3 第二个版本,配合npm修改版本号,加上参数识别功能 13-11-10

v 0.0.1 第一个版本 13-10-23

License

The MIT license.

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
3、
 
6.返回顶部
 
技术分享图片 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。


以上是关于杂项:grunt-tmod的主要内容,如果未能解决你的问题,请参考以下文章

csharp 杂项代码.s

[开发杂项][编辑器][代码阅读]ctags&vim

[开发杂项][编辑器][代码阅读]ctags&vim

[开发杂项][编辑器][代码阅读]ctags&vim

一些杂项

杂项-Java:自定义标签