# template-inline

> Grunt task for embedding html template as base64 or UriEncode inside your js.

Latest version **0.3.5** (published 2013-10-31) · 0 weekly downloads

## Install

```sh
npm install template-inline
pnpm add template-inline
yarn add template-inline
bun add template-inline
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2013-10-31 |
| First published | 2013-10-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | nebel |
| Maintainers | pronebel |
| Keywords | gruntplugin, base64, template embed, template inline |

## Links

- npm: https://www.npmjs.com/package/template-inline
- npm.io page: https://npm.io/package/template-inline

## Dependencies (2)

- [buffers](https://npm.io/package/buffers.md) ~0.1.1
- [request](https://npm.io/package/request.md) ~2.11

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.3.5 (latest) — 2013-10-31
- 0.3.3 — 2013-10-31
- 0.3.2 — 2013-10-31
- 0.3.1 — 2013-10-31

## README

Grunt Plugin:   template-inline   
===============

Grunt task for embedding html template as base64 or  encodeURIComponent inside your js.


####插件使用参见： 

example/todoMvc的grunt配置


#####效果：

参见 [https://github.com/pronebel/template-inline](https://github.com/pronebel/template-inline "Github")


如图所示，没有使用插件时，会加载模板文件。使用插件不会加载模板文件。


##### 使用方式

1.参见：代码下的TodoMVC的grunt配置

2.原来的requirejs中的 **"text!xxx/yyy.html"会被编译成  "tplin!html内容编码"。** TodoMVC中的Rrequirejs的目录中有个tplin文件，改动代码，根据编码方式进行解码实现。
	
	注：html内容编码为读取的html的内容，根据编码方式配置生成编码后的内容。
	目前支持base64，encodeURIComponent编码





### 项目中的grunt配置供参考构建应用思路：


  
	module.exports = function(grunt) {
	    "use strict";
	    var jsFiles = [
	        'js/app/**/*.js',
	        'js/model/**/*.js',
	        'js/module/**/*.js',
	        'js/view/**/*.js'
	    ];
	
	    grunt.initConfig({
	        jshint: {
	            files: jsFiles
	        },
	        templateInline: {
	
	            tpl: {
	
	                files : [
	                    {
	                        expand: true,
	                        cwd : 'js/',
	                        src : ['*/**/*.js','!lib/comb.src/*.js'],
	                        filter : 'isFile',
	                        dest : '.tplin/'
	                    }
	                ],
	
	                options: {
	                    baseDir: "js/",
	                    type:"base64" //base64 or uri
	                }
	            }
	          
	        },
	        compass: {
	            compile: {
	                options: {
	                    sassDir: 'sass',
	                    cssDir: 'css',
	                    environment: 'production'
	                }
	            }
	        },
	        clean: {
	            css: [ 'css/*.css'] ,
	            dist: [ 'dist/' ],
	            tplin: [ '.tplin/' ]
	        },
	        uglify : {
	            options: {
	                mangle: {
	                    except: ['require','exports','requirejs']
	                }
	            },
	            build: {
	              files:  [
	                  {
	
	                    expand: true,
	                    cwd:'.tplin/',
	                    src : ['**/*.js'],
	                    dest: 'dist/'
	                  }
	              ]
	
	            }
	        }
	    });
	
	
	
	
	
	    grunt.loadNpmTasks('grunt-contrib-mincss');
	    grunt.loadNpmTasks('grunt-contrib-copy');
	    grunt.loadNpmTasks('grunt-contrib-jshint');
	    grunt.loadNpmTasks('grunt-contrib-compass');
	    grunt.loadNpmTasks('grunt-contrib-uglify');
	    grunt.loadNpmTasks('grunt-contrib-clean');
	    grunt.loadNpmTasks('template-inline');
	
	
	
	
	    grunt.registerTask("compile:js",['clean:dist','templateInline:tpl','uglify:build','clean:tplin']);
	    grunt.registerTask("compile:css",['clean:css','compass:compile'])
	
	
	    grunt.registerTask('default', ['compile:js' ]);

	};

---
_Source: https://npm.io/package/template-inline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._