zoukankan      html  css  js  c++  java
  • Grunt:grunt-tmod

    ylbtech-Grunt: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.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    实现 ajax 多项选择框
    Ajax 文件上传之PHP心得
    php tree生成树分享
    基于JQuery框架的AJAX
    jQuery Ajax 全解析
    asp 下载函数
    10元奥运纪念钞明发行 与人民币等值流通
    jQuery(Ajax)/PHP/MySQL实现搜索自动提示功能
    隔行扫描和逐行扫描(interlace and progressive )
    VGA 输出调试
  • 原文地址:https://www.cnblogs.com/storebook/p/9095592.html
Copyright © 2011-2022 走看看