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
如图所示,没有使用插件时,会加载模板文件。使用插件不会加载模板文件。
使用方式
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' ]);
};