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.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

杂项:grunt-tmod的更多相关文章

  1. 杂项-Grunt:grunt build 打包和常见错误

    ylbtech-杂项-Grunt:grunt build 打包和常见错误 1. 安装.打包返回顶部 1. npm WARN deprecated coffee-script@: CoffeeScrip ...

  2. 杂项-TMod:常见错误

    ylbtech-杂项-TMod:常见错误 1.返回顶部 1. 1.1. {Template Error} TypeError: dateDiff is not a function at Array. ...

  3. 杂项-Tmod:常见错误提示

    ylbtech-杂项-Tmod:常见错误提示 1.返回顶部 1. The column 'Content' was specified multiple times for 'T'.select a. ...

  4. 杂项:Grunt

    ylbtech-杂项:Grunt GRUNTJavaScript 世界的构建工具 1. 返回顶部 1. 为何要用构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification) ...

  5. Grunt:GruntFile.js

    ylbtech-Grunt:GruntFile.js 1.返回顶部 1. module.exports = function (grunt) { grunt.initConfig({ useminPr ...

  6. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  7. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  8. 杂项之python描述符协议

    杂项之python描述符协议 本节内容 由来 描述符协议概念 类的静态方法及类方法实现原理 类作为装饰器使用 1. 由来 闲来无事去看了看django中的内置分页方法,发现里面用到了类作为装饰器来使用 ...

  9. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

随机推荐

  1. 【python】-- web开发之JavaScript

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...

  2. eclipse安装Activiti Designer插件(转载:http://blog.csdn.net/qq_33547950/article/details/54926435)

    为了完成毕业设计,需要学习Activiti.万事开头难,果然刚开始就遇到了问题.<Activiti实战>和视频教程里提供的安装Activiti Designer插件方法(即下文方法一)不能 ...

  3. dygraphs for R

    dygraphs一个功能非常强大的处理时间序列的画图包!画出的图在html中打开,鼠标点处,即可得到数据信息.详情见 http://rstudio.github.io/dygraphs/index.h ...

  4. GPS数据转换为OneNet需要的数据

    GPS的数据格式是DDMM.MMMMMM 获取到的GPS帧数据比如是:$GNRMC,112317.000,A,3438.1633,N,11224.4992,E,0.19,186.95,240916,, ...

  5. LeetCode:字母异位词分组【16】

    LeetCode:字母异位词分组[16] 题目描述 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", &quo ...

  6. 【leetcode刷题笔记】Reverse Integer

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 解题:设定一个变量 ...

  7. web框架详解之tornado 一 模板语言以及框架本质

    一.概要 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过 ...

  8. apache中配置php支持模块模式、cgi模式和fastcgi模式的实验

    首先安装apache.mysql和php,依次顺序安装. 1.apache.mysql的安装比较简单,略过 2. php的安装,我安装的是php5.3.6内置了php-fpm,所以不需要再单独下补丁了 ...

  9. mysql 根据sql查询语句导出数据

    在这里提供2中方式: 建议:可以使用方式二,就不使用方式一. 方式一: 在linux下支持,window下不支持. 进入到mysql的bin目录,或者已经给mysql配置了环境变量就不用进入bin目录 ...

  10. Sobel边缘检测

    Sobel算子:[-1  0  1 -2  0  2 -1  0  1] 用此算子与原图像做卷积,可以检测出垂直方向的边缘.算子作用在图像的第二列,结果是:200,200,200:作用在第三列,结果是 ...