At Mojn we needed a way to write a reduced version of our server-side environment as an angular module, as well as generate a shared color configuration in our stylus and script files.
I stumbled upon grunt-template while browsing through npmjs looking for interesting tasks. Grunt-template is a simple task designed to pass any data you provide into an underscore template file, and write the result to another file. That’s perfect! Now let’s write some templates and configure grunt-template.</section>
Angular modules
What if we could just define angular modules as {myModule: {myValue: 'Some value'}}
?
This can be done with this simple template.
// templates/angular-module.tpl
<% _.forEach(modules, function(moduleData, moduleName) { %>
angular.module('<%= moduleName %>',[])
<% _.forEach(moduleData, function(v, k) { %>
.constant('<%= k %>', <%= JSON.stringify(v) %>)
<% }); %>;
<% }); %>
And the following grunt-template options:
// Gruntfile.js
grunt.initConfig({
template: {
// define a new target called angular
angular: {
options: {
data: {
// Define modules here
modules: {
myEnvironment: {
env: {
name: 'Development',
basePath: 'http://localhost:3000'
}
}
}
}
},
files: {
'dist/modules.js': 'templates/angular-module.tpl'
}
}
}
});
So now grunt template:angular
should produce
// dist/modules.js
angular.module('myEnvironment')
.const('env', {"name":"Development","basePath":"http://localhost:3000"})
;
ready to be included in the angular app, and point to the environment path as env.basePath
.
Stylus template
We want to define a colors
module, for which we can use the angular template,
and a stylus file that defines the vars. How about something like this:
// templates/stylus.tpl
<% _.forEach(stylus.variables, function(value, key) { %>
<%- key %> = <%- value %>;<% }); %>
That should make a variable for every value in stylus.variables
, passed to the template.
Now we just need to pass an object, {stylus: {variables: { ... }}}
to the
task and point to the newly created template.
// colors.json
{
"blue": "#00F",
"red": "#F00"
}
// Gruntfile.js
var colors = require('./colors.json');
grunt.initConfig({
template: {
// ...
// define a new target called colors
colors: {
options: {
data: {
// For use with angular-module.tpl
modules: {
colors: {
colors: colors
}
},
// For use with stylus.tpl
stylus: {
variables: colors
}
}
},
files: {
// reuse angular template from previous section
'dist/colors.js' : 'templates/angular-module.tpl',
'dist/colors.styl': 'templates/stylus.tpl'
}
}
}
});
grunt template:colors
should now produce
// dist/colors.js
angular.module('colors')
.const('colors', {"blue": "#00F", "red": "#F00"})
;
// dist/colors.styl
red = #00F;
blue = #F00;
and we’re ready to use our color scheme in code as well as style files.
Posted in Programming with : Grunt