Name: Introduction to Grunt
Uploaded: 2013-11-14T08:45:28-06:00
Description: In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Introduction to Grunt

**John Lindquist**: The first thing you want to do to get started with Grunt is npm install -g grunt-cli so you can use the command line interface to run Grunt. But it says, "Unable to find local Grunt," so npm install grunt, and this will install Grunt locally, so we'll say Grunt again, and it says, "Unable to find Gruntfile."

We can hop over here, and we'll create a JavaScript file, we'll just name it Gruntfile, and if I switch back to the terminal and see if I run Grunt again, it'll say, "Task 'default' not found." We'll switch back to our Gruntfile, and we'll create our default task. We'll have module.exports pass in Grunt, and we'll say grunt.registerTask "default", and our default task, we'll just basically do a console log with grunt.log.write lin, and say "Hello world".

From here, we'll switch back to the terminal, run Grunt one more time, and we have our first "Hello world" default task.

Another thing to mention is you can pass in parameters if you want, so we can say, "Hello, " + name. What we need to do here is say Grunt, run the default task, then pass in the name, we'll pass in the name John, and then we can get "Hello, John" out of that.

The other thing to mention, the last thing I'm going to mention intro is you'll see a grunt.initConfig, and in our initConfig, we usually pass in an object which will configure how Grunt is going to run. Let's pass in just a person that has a first name of, let's say, Frank. If I want to get this first name, I can just say grunt.config.get("person").firstName, and from there, I can run this, and I'll just run Grunt again, it'll run the default task, and you can see it's running "Hello, Frank".

Another example you might see, though, is that someone will say grunt.file.readJSON file, and you can pass in some sort of config.json file. We'll just create a new config.json, and from here, we'll just have a person with a first name of, we'll say Harold. If I switch back over to the terminal and run this now, you can see that it actually read in this config.json file, set that person property, and read the first name off of that person property.

That's your very basic intro to Grunt. We'll get into running more tasks and loading in other npm tasks that you can use with Grunt, but the basics is just registering a task, configuring an object to read other properties into your tasks, and we'll get into things like templates later on.

One thing to mention is that in WebStorm, the way that I got auto-complete off of things like, you know, registerTask and whatnot, is you can go into the settings and go into your JavaScript libraries, you hit Download, and you go to TypeScript community stubs, and you'll find Grunt in your list. I don't have it in mine because I already have it installed. Once you click, check that box, it'll actually use the TypeScript stubs to provide auto-complete for your Grunt files, so that's a pretty cool feature of WebStorm.

Introduction to Grunt

Share this video with your friends