This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Template

3:45 JavaScript lesson by

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

John Lindquist: When you first start working with Grunt you've probably seen this funny little syntax that looks something like this where inside of a string you'll see one of these guys that has something like equals and then files inside of it.

What this actually is is a template that they use in underscore and low dash which Grunt uses. So if I were to have a files up here and I said, "JS," that one hour to go and we'll just register a default task so "Default function," and we'll do a Grunt log right line and a Grunt config get. We'll get our compile.

You can see that when we get that and write it out you can see it's "JS" because this evaluates to this. We could basically say, "Hello," and "Hello JS". So basically it's just a template. We're just going to interpolate and evaluate that.

Now this little guy here is very important with just the equals sign. It's just going to show what it is. If you us the minus sign and I were to put single quotes in here or something then it would escape those characters. It's escaping the single quotes. Or if I don't put the minus sign in here at all I can actually execute something like...We'll do something fancy like "For each file," so we'll do "Function files." Then let's break this up to make it a little more readable. We need to close this off and then close this off because in here we want to interpolate the files. This means we'll want our files up here to be an array instead so let's say, "JS" and "HTML".

When we run this again you can see we get, "HelloJS.html". Let's clean that up a bit and say file type is that...We don't want the "Hello" anymore and run it again. You can see we get "File type JS," "File type HTML". Basically you can loop through there and do whatever you want with the template.

You won't see that happen very often actually. The 99 percent scenario is just using a very, very basic equals sign and then something like files, just to display a list of files or something that's configured in some other property somewhere. But I think it's good to know the difference between the equals, the minus, and nothing there at all just so you fully understand the templating language.

If you want to see more on this look up the documentation on templates for underscore or low dash. You can find more about it in there.

The last thing I want to show is there is actually a Grunt template that you can process your own template. If I were to grab this guy up here, copy it, and drop it in here you can see that it will output the same thing. It's actually reaching into the config and grabbing this off of it.

Or there's other handy date tools like "today" if you want to print off what the time is today. You can look at the Grunt docs to see that different formatting for the dates. We have today as November 21st and the timestamp.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?