This Grunt plugin interpolates template files with any data you provide and saves the result to another file.
Home Page: http://git.io/grunt-template
License: MIT License
Not sure how hard this would be, but it would be really nice if there was an easy way to target files. I have about 150 files i need template, but it would take half a day to add each one into the "files" options. All my templates end with .tpl so it would be nice if I could just say
files: { 'app/**/*.js': 'app/**/*.js.tpl' }
or something similar which would take the .tpl file, process it, and output the same file name MINUS the .tpl part. That way i could just have a single entry in here to grab all .tpl files rather than 150 lines of code
I have the following configuration:
template: {
'process-html-template': {
options: {
data: {
'current_locale': 'en-us',
'css_file': 'css/main.css'
}
},
dev: {
files: {
'<%= yeoman.dev %>/index.html': ['<%= yeoman.app %>/index.html']
}
},
dist: {
files: {
'<%= yeoman.dist %>/index.html': ['<%= yeoman.dist %>/index.html']
}
}
}
}
It does nothing.
Running "template:process-html-template:dist" (template) task
Done, without errors.
While this configuration works:
template: {
'process-html-template': {
options: {
data: {
'current_locale': 'en-us',
'css_file': 'css/main.css'
}
},
files: {
'<%= yeoman.dev %>/index.html': ['<%= yeoman.app %>/index.html'],
'<%= yeoman.dist %>/index.html': ['<%= yeoman.dist %>/index.html']
},
dev: {
files: {
'<%= yeoman.dev %>/index.html': ['<%= yeoman.app %>/index.html']
}
},
dist: {
files: {
'<%= yeoman.dist %>/index.html': ['<%= yeoman.dist %>/index.html']
}
}
}
}
Running "template:process-html-template:dist" (template) task
File `../target/sara-manager/dev/index.html` created.
File `../target/sara-manager/dist/index.html` created.
Done, without errors.
But does not take care of the target.
I'd like to pull in a simple list (JSON) and have your template task create a templated file for each list item. Is that possible?
grunt.template.addDelimiters("templated-templates", "{%", "%}");
template: {
"gruntfile": {
options: {
delimiters: "templated-templates",
data: {
"title": "hmm",
"version": "0.0.0"
}
},
src: "client/Gruntfile.js",
dest: "client/Gruntfile.js"
},
}<%= title %> <%= version %>
module.exports = function(grunt)
{
// Initiated in requested task -- to support returning to "default" from external tasks
var config =
{
title: "{%= title %} v{%= version %}",
…The file saves, but the custom delimiters do not appear to be in use as the <%``%> variables are replaced while the {%``%} variables are completely ignored.
Is there a way to target a list of files in a directory? Something like
'files': {
'dist/*.html': ['src/*.tpl']
}which would process all .tpl files inside of the src directory and then output them into the dist directory.
Sorry if this is a stupid question, pretty new to Grunt so still trying to understand how everything works.
Provide an option called permissions that allows the specification of the generated file's permissions.
If falsey (the default), the destination file will have the most restrictive file permissions among all of the files that produced the generated file. For example, if foo.txt was produced from template files bar.txt with permissions rwxrwxrwx (0o777) and baz.txt with permissions r--r--r-- (0o444), then the file permissions of foo.txt would be r--r--r-- (0o444).
If truey, the value is a specification of the destination file's permissions, like
0o755),ugo+rwx or rwxrwxrwx),{ read: ['user', 'group', 'others'], write: ['user', 'group', 'others'], execute: ['user', 'group', 'others']} or{user: ['read', 'write', 'execute'], group: ['read', 'write', 'execute'], others: ['read', 'write', 'execute']},Wonderful work on grunt-template! Thank you for making it so easy.
In my Gruntfile.js I have a files object similar to this:
'files': {
'dist/post.html': ['src/post.html.tpl']
}
I accidentally misspelled tpl as tmpl and got no error when executing my grunt. It might be nice if there were some sort of error instead. Although I'm not sure if this is a feature somehow. :-)
"version": "0.2.2",
This config works fine:
template: {
options: {
data: {
componentID: componentID,
componentName: componentName,
componentCapitalized: componentCapitalized,
componentUnderscored: componentUnderscored
}
},
'README.md' : {
files: {
'README.md': [ 'README.md.tpl']
}
},
'docs/README.md' : {
files: {
'docs/README.md': [ 'README.md.tpl']
}
}
}
Or this silly config, also work:
template: {
'README.md' : {
options: {
data: {
componentID: componentID,
componentName: componentName,
componentCapitalized: componentCapitalized,
componentUnderscored: componentUnderscored,
docsDir: 'docs',
mainPage: true
}
},
files: {
'README.md': [ 'README.md.tpl']
}
},
'docs/README.md' : {
options: {
data: {
componentID: componentID,
componentName: componentName,
componentCapitalized: componentCapitalized,
componentUnderscored: componentUnderscored,
docsDir: '.',
mainPage: false
}
},
files: {
'docs/README.md': [ 'README.md.tpl']
}
}
}
But this doesn't work:
template: {
options: {
data: {
componentID: componentID,
componentName: componentName,
componentCapitalized: componentCapitalized,
componentUnderscored: componentUnderscored
}
},
'README.md' : {
options: {
data: {
docsDir: 'docs',
mainPage: true
}
},
files: {
'README.md': [ 'README.md.tpl']
}
},
'docs/README.md' : {
options: {
data: {
docsDir: '.',
mainPage: false
}
},
files: {
'docs/README.md': [ 'README.md.tpl']
}
}
}
So as you see, I want to extract common options from target level to task level, and leave target options ability to override task options. Is is this expected order of overriding in grunt options at all?
I run simply: grunt template and it gives me:
$ grunt template
Running "template:README.md" (template) task
Warning: An error occurred while processing a template (componentName is not def
ined). Use --force to continue.
or similar ...
Simply, target options override task options, and they just disappear.
Or Am I mistaken somewhere?
Should I play with grunt.registerTask() vs. grunt.registerMultitaskTask() ?
It would be handy if the _.template "variable" option was settable via the task. Example use case is passing an array to the template without needing a wrapping object
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.