0.1.11 • Published 7 years ago
grunt-simple-tpl v0.1.11
grunt-simple-tpl v0.1.11
Simple template for HTML, JS and CSS
Getting Started
This plugin requires Grunt >=0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-simple-tpl --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-simple-tpl');The "simple_tpl" task
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
Options
data
Type: Object
Default: {}
Usage Examples
Grunt config
grunt.initConfig({
simple_tpl: {
dev: {
options: {
data: {
web_root: 'http://dev.domain.com',
css_path: '//dev.cdn.com/w/1604/c',
img_path: '//dev.cdn.com/w/1604/i',
js_path: '//dev.cdn.com/w/1604/j',
version: grunt.template.today("yymmddHHMM")
}
},
files: [
{
expand: true,
cwd: 'html',
src: ['**/*.html'],
dest: '../views'
},
{
expand: true,
cwd: 'css',
src: ['**/*.css'],
dest: '../static/css'
}
]
},
test: {
options: {
data: {
web_root: 'http://test.domain.com',
css_path: '//test.cdn.com/w/1604/c',
img_path: '//test.cdn.com/w/1604/i',
js_path: '//test.cdn.com/w/1604/j',
version: grunt.template.today("yymmddHHMM")
}
},
files: [
{
expand: true,
cwd: 'html',
src: ['**/*.html'],
dest: '../views'
},
{
expand: true,
cwd: 'css',
src: ['**/*.css'],
dest: '../static/css'
}
]
},
prod: {
options: {
data: {
web_root: 'http://www.domain.com',
css_path: '//cdn.com/w/1604/c',
img_path: '//cdn.com/w/1604/i',
js_path: '//cdn.com/w/1604/j',
version: grunt.template.today("yymmddHHMM")
}
},
files: [
{
expand: true,
cwd: 'html',
src: ['**/*.html'],
dest: '../views'
},
{
expand: true,
cwd: 'css',
src: ['**/*.css'],
dest: '../static/css'
}
]
}
}
});Templates
HTML template:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCT</title>
<link rel="stylesheet" href="{{{css_path}}}/global.css?v={{{version}}}">
</head>
<body>
<a href="{{{web_root}}}/home.html"><img src="{{{img_path}}}/logo.png?v={{{version}}}"></a>
<script src="{{{js_path}}}/base.js?v={{{version}}}"></script>
</body>
</html>Run simple_tpl:prod, it will output:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCT</title>
<link rel="stylesheet" href="//cdn.com/w/1604/c/global.css?v=1604211431">
</head>
<body>
<a href="http://www.domain.com/home.html"><img src="//cdn.com/w/1604/i/logo.png?v=1604211431"></a>
<script src="//cdn.com/w/1604/j/base.js?v=1604211431"></script>
</body>
</html>CSS templates:
.logo {
background: url('{{{img_path}}}/logo.png?v={{{version}}}');
}Run simple_tpl:prod, it will output:
.logo {
background: url('//cdn.com/w/1604/i/logo.png?v=1604211431');
}Release History
- 2016-04-12 v0.1.0 Published.